ひよっこPGのブログ

主に、技術メモや英語たまにギター関連のことも書いているブログです。

うおーーー! 教えて頂いたことに感謝の気持ちをどう伝えたらいいか分からないw

id:sho322さん 教えていただき本当にありがとうございます!!!!!!!!
回答記事 : jQuery find()とfilter()の違い - 感謝のプログラミング 10000時間

この記事をじっくり読んで自分なりの解釈を書きたいと思います^ー^

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

↑と↓ は 同じ意味!

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


そして検索メソッドは、findの他に filter()というメソッドもあるみたいでその違いも分かりました。
簡単にいうと、 親要素のみ検索する(filter) と 子要素全てを検索する(find)違いですよね?
ちょっと違いを説明してみます!



違いの説明時に使用する共通のDOM要素

親 div#parent
<div id="parent" style="padding: 10px; border : 1px solid #000">
	子供1 div#children1
	<div id="children1" style="padding: 10px; border : 1px solid #000">
		子供2 div#children2
		<div id="children2" style="padding: 10px; border : 1px solid #000"></div>
	</div>
</div>

親 div#parent


子供1 div#children1

子供2 div#children2



findメソッドでの検索

$('div#parent').find('#parent').css('border', '5px solid red');
$('div#parent').find('#children1').css('border', '5px solid red');
$('div#parent').find('#children2').css('border', '5px solid red');

親 div#parent


子供1 div#children1

子供2 div#children2


find() = 子要素全てを検索
説明すると、 親要素 div#parentを取得し
そのdiv#parent要素内から
親→子供1→子供2の順に検索する。

検索結果が見つかったものは、 枠線が 赤色になる。

処理を実行するには、 find実行!!!というボタンを押してください。

結果は、親要素以外の子要素は、すべて赤色になっているので
子要素すべてが検索対象ということが分かります。

filterメソッド

$('div#parent').filter('#parent').css('border', '5px solid red');
$('div#parent').filter('#children1').css('border', '5px solid red');
$('div#parent').filter('#children2').css('border', '5px solid red');

親 div#parent


子供1 div#children1

子供2 div#children2

filter() = 親要素のみ検索
こちらも、find()と同じように検索して、処理を実行します。
処理を実行させたい場合は、 filter実行!!!ボタンを押してください。

結果は、親要素のみ赤色になっているので
親要素のみが検索対象ということが分かります。

find()とfilter()の違いのまとめ

find() 検索ヒットした要素の子要素すべてが検索対象になる。
filter() 検索ヒットした要素の親要素のみ , 要素自身のみ検索対象になる。

自分が困ってたことの解釈

$('<html><body><div id="hoge">aaaa</div></body></html>').find('#hoge').text();
//=> 空文字が返る。

これを簡単にして

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

この場合は、親要素は div#hogeになり
子要素に "aaaa" という文字列があるという感じです。

findは子要素全てが検索対象になるので
子要素 "aaaa"から #hogeを検索しようとします。
なので、 検索ヒットしない。 = 空文字が返る。


このようなタグ構成の場合は、filter()で検索すれば検索ヒットします。

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

親要素が div#hogeなのでそこから検索すると、検索ヒットする。

感想

find()とfilter()の違いがわかって、検索対象がどういう風に変わるのか
分かったので、これからは困りそうにはないと思います!!!

twitterでも友人から、教えていただきました。
友人の回答は

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

ダミーの親要素

を作って findしたらいいんじゃないの? と教えてもらいました。
あ〜たしかになーと思って、動かしてみるとちゃんと "aaaa"が取得出来ました!

回答していただいた方、本当にありがとうございました!!!