[JavaScript] [jQuery] jQuery.find() と jQuery.children() で子(子孫)要素を取得する

jQuery を使って、jQueryオブジェクトの子要素、子孫要素をまとめて取得する場合、.find() と .children()メソッドを使います。このエントリでは、以下のネストした<ul id="nav"> について、li要素を取得しながら、2つのメソッドの違いを確認してみます。
(以下すべてのコードでは、jquery-1.6.2.js を使用して動作を確認しました。)

<ul id="nav">
<li class="toplevel">sport
<ul>
<li>soccer</li>
<li>bascketball</li>
</ul>
</li>
<li class="toplevel">technorogy
<ul>
<li>windows</li>
<li>Mac</li>
</ul>
</li>
</ul>

.find()は子孫要素を、.children()は直接の子要素を

.find()は、jQueryオブジェクトのすべての子孫要素に対して、引数で渡したセレクタ式にマッチする要素を取得します。

var lis = $("ul#nav").find('li');
console.log(lis.length); // 6 (#nav 以下のすべてのli要素が取得された)

これは,単純に$()にセレクタを渡した場合や、$()に引数を2つ渡した場合と同じです。

var lis = $('ul#nav li');

var nav = $('ul#nav');
lis = $('li', nav);

また、jQuery バージョン1.6 からは,jQueryオブジェクト,DOM elementでもfilterできるようになりました。

var toplevel = $("li.toplevel");

var nav = $('ul#nav');
var lis = nav.find(toplevel);
alert(lis.length); //2 (class="toplevel" のli が取得された。)

.children()は直接の子要素に対して、セレクタに一致する要素を取得します。

var lis = $("ul#nav").children('li');
console.log(lis.length); // 2 (#nav の直接の子要素のli要素が取得された)

これは,単純に$()にセレクタを渡した場合や、$()に引数を2つ渡した場合(※)と同じです。

var lis = $('ul#nav > li');

var nav = $('ul#nav');
lis = $('> li', nav);

まとめ

• .find()はすべての子孫要素に対して、引数で渡したセレクタに一致する要素を取得する。
• .children()は直接の子要素に対して、引数で渡したセレクタに一致する要素を取得する。
• .find()には、jQueryオブジェクトやDOM element を渡すことができる。

※推奨されない記法

$()に2つの引数(selector, jQuery object)渡して、直接の子要素を取得する場合、">" で子要素を指定できますが、jQuery のドキュメントを見ると、この書き方は推奨されない(将来のリリースではサポートされない)ようです。(http://api.jquery.com/child-selector/)

var nav = $("ul#nav");
var lis = $("> li", nav); // 推奨されない記法

上のコードは、.children()を使って以下のように書き換えられます。

var lis = ("ul#nav").children('li');