サイト制作に関するメモ書き

HOME > JavaScript > jQuery > Ajaxで取得したHTMLにfindを使って絞り込めない

Ajaxで取得したHTMLにfindを使って絞り込めない

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を使ったデモページ
 

【参考サイト】

 

“Ajaxで取得したHTMLにfindを使って絞り込めない” への2件のフィードバック

  1. にゃんだ より:

    とても助かりました。

    未だに公式にすら注意書きがないのが残念です。

    • cly7796.net より:

      にゃんださん
      コメントありがとうございます!
      お役に立てたようでよかったです。

cly7796.net にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP