Ajaxで取得したデータをfindで絞り込んだ際に、あるはずの要素を取得できない現象に遭遇したので、その対応方法をメモしておきます。
サンプルコード
test.html(取得するHTML)
<body> <div id="sample">ここの内容を取得してみます。</div> </body>
JavaScript
$(function() {
$.ajax({
type: 'GET',
url: 'test.html',
dataType: 'html',
success: function(data) {
console.log(data);
console.log($(data).find('#sample').length);
}
});
});
console.log(data)で表示した時点では#sampleが確認できますが、console.log($(data).find(‘#sample’).length)で#sampleの要素数を表示すると0と返ってきます。
findで要素が見つけられないデモページ
サンプルコード2
body直下にある要素に対してはfindが使えないようです。
test2.html(取得するHTML)
<body> <div id="contents"> <div id="sample">ここの内容を取得してみます。</div> </div> </body>
JavaScript
$(function() {
$.ajax({
type: 'GET',
url: 'test2.html',
dataType: 'html',
success: function(data) {
console.log(data);
console.log($(data).find('#sample').length);
}
});
});
#sampleに親要素を追加すると、#sampleが取得できました。
階層を一つ下げた場合のデモページ
サンプルコード3
test3.html(取得するHTML)
<body> <div id="sample">ここの内容を取得してみます。</div> </body>
JavaScript
$(function() {
$.ajax({
type: 'GET',
url: 'test3.html',
dataType: 'html',
success: function(data) {
console.log(data);
console.log($(data).filter('#sample').length);
}
});
});
#sampleはbody直下のままで、findの代わりにfilterを使用することでも対応できます。
filterを使ったデモページ
【参考サイト】
ありがと、本当にありがと｡°(°´ᯅ`°)°｡
古い記事にすみません。
こんな落とし穴があるとは思いませんでした。
大変助かりました。ありがとうございます。
とても助かりました。
未だに公式にすら注意書きがないのが残念です。
にゃんださん
コメントありがとうございます！
お役に立てたようでよかったです。