読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQuery find()とfilter()の違い

jQuery
<スポンサーリンク>

id:buzzword111さんが以下の記事で、「jQueryで、HTML文字列をDOM変換したDOMオブジェクトをfindで検索が出来ない・・・・・。」と悩んでおられた。
http://buzzword111.hatenablog.com/entry/2014/02/20/021433
ちょっと調べてみたんだけど、結論からいうと、find()の代わりにfilter()を使えばテキストを取得できる。

findとfilterの違いは以下の記事にとても詳しく解説されている。
http://shinya-blog.blogspot.jp/2010/09/jqueryfilterfind.html

buzzさんの以下のfindだと、

$('<html><body><div id="hoge">aaaa</div></body></html>').find('#hoge').text();

「aaaa」だけ取得されているので、#hogeでは見つけられない。
filterだと、

<div id="hoge">aaaa</div>

の部分が取得されるので、#hogeで見つけることができる。

仮に、

$('<html><body><div id="hoge3"><p>find!</p></div></body></html>').find('p').text();

となっていた場合は、「find!」を取得することができる。
なぜなら、findで取り出したのは、

<p>find!</p>

だから。

色々と試したのが以下のサンプル。★がついた部分のコメントに注目。
余計なものもけっこう書いてあるのはご愛嬌。
要は、findとfilterの違いがポイント。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM挿入</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var $hoge = $('<html><body><div id="hoge">aaaa</div></body></html>').find('#hoge').text();
	console.log($hoge); //何も表示されない

	var $fil = $('<html><body><div id="hoge2">filter</div></body></html>').filter('#hoge2').text();
	console.log($fil); //★filterが表示される

	var $hoge3 = $('<html><body><div id="hoge3"><p>find!</p></div></body></html>').find('p').text();
	console.log($hoge3); //★find!と表示される

	var $fuga = $('<div id="fuga"><p>bbbb</p></div>').find("#fuga").end().appendTo('body').text();
	console.log($fuga); //bbbbが表示される

	var $bar = $('<div id="fuga"><p>cccc</p></div>').find("#bar").appendTo('body').text();
	console.log($bar); //何も表示されない

	var $foo = $('<div id="foo"><p>dddd</p></div>').appendTo('body').text();
	console.log($foo); //dddd

	var $test = $('<div id="test"><p>test</p></div>').find('p').text();
	console.log($test); //test

	var $test2 = $('<div id="test2"><p>test2</p></div>').find('#test2').text();
	console.log($test2); //何も表示されない

	var $get = $('<html><body><div id="hoge">aaaa</div></body></html>').get();

	$.each($get, function() {
		console.log(this); //div#hoge
	});
});

</script>
</head>
<body>
<h2>サンプル</h2>

</body>
</html>

メソッド説明

・endメソッド
jQueryメソッドチェインの中で、現在のラップ集合をバックアップして1つ前に返されたラップ集合に戻す

・findメソッド
元の集合にある要素の子孫で、渡されたセレクタ式にマッチする全ての要素を含む新しいラップ集合を返す

・filterメソッド
filter(expression)
ラップ集合のコピーを作成し、その新しい集合から、expressionパラメータの値によって指定された範疇に一致しない要素を削除する。
戻り値は、元のラップ集合のコピーからフィルタにかかった要素を取り出したものを返す。

2014/02/22追記

buzzさんがとてもわかりやすい追記記事を書いてくれました!
http://buzzword111.hatenablog.com/entry/2014/02/21/235648

勉強になります!

参考

StackOverFlow
http://stackoverflow.com/questions/4641226/jquery-cannot-find-div-by-id
あと、jQuery関数にhtmlタグやbodyタグを渡すのはマナー違反っぽいです。

jQueryクックブック p.24 レシピ1.10

jQueryクックブック

jQueryクックブック