AjaxでHTMLデータ取得して、さらにそのデータからimgタグを抜き出して処理を行ってみます。
今回はimgタグを取得するようにしていますが、別のタグやclassでも問題ありません。
サンプルコード
text.html
Ajaxで取得するHTMLです。
<div id="page"> <img src="img01.jpg" alt="" /> <img src="img02.jpg" alt="" /> <img src="img03.jpg" alt="" /> <img src="img04.jpg" alt="" /> </div>
JavaScript
AjaxでHTMLを取得して、そのデータに含まれるimgタグのsrcをconsoleで表示させてみます。
$(function() {
$.ajax({
type: 'GET',
url: 'test.html',
dataType: 'html',
success: function(data) {
// Ajaxで取得したデータからimgタグを取得する
var imgs = $(data).find('img');
for (var i = 0; i < imgs.length; i++) {
// imgのsrcを取り出す
console.log($(imgs[i]).attr('src'));
}
}
});
});
注意点として、以下のようにbody直下にimgタグがある場合、そのimgタグは取得できません。
text.html
<body> <img src="img01.jpg" alt="" /> <div id="page"> <img src="img02.jpg" alt="" /> <img src="img03.jpg" alt="" /> <img src="img04.jpg" alt="" /> </div> </body>
body直下の要素を取得する場合、find()ではなくfilter()を使う必要があります。
Ajaxで取得したHTMLにfindを使って絞り込めない | cly7796.net
ただし、filter()にした場合は逆にbody直下以外が取得できなくなるので、対応方法としてはAjaxで取得するHTMLを変更する形がよいと思います。
コメントが承認されるまで時間がかかります。