うおーーー! 教えて頂いたことに感謝の気持ちをどう伝えたらいいか分からない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でも友人から、教えていただきました。
友人の回答は
@Buzzword111 階層を作るためダミーのdivでくくるといける。
$('<html><body><div><div id="hoge">aaa</div></div></body></html>').find('#hoge').text()
— sisuke (@urasin13) 2014, 2月 21
<div><div id="hoge">aaaa</div></div>
ダミーの親要素
あ〜たしかになーと思って、動かしてみるとちゃんと "aaaa"が取得出来ました!
回答していただいた方、本当にありがとうございました!!!