[jQuery] find()とchildren()の使い分け

jQueryのメソッドfind()とchildren()は、ともに指定した要素が持つ子要素を取得するためのものですが、children()が直下の要素だけを取得するのに対し、find()は全ての子要素を探索するという違いがあります。両者の違いと使い方についてまとめました。

//html example
<div>
  <dl>
    <dt>カテゴリー</dt>
    <dd><a href="./foo.html">foo</a></dd>
    <dd><a href="./bar.html">bar</a></dd>
    <dd><a href="./hoge.html">hoge</a></dd>
  </dl>
</div>

find()は強力な検索機能を持っています。例えば上のhtmlのdivの中から、一番最後のリンク先を取得したい場合、このようなコードで可能になります。

var a = $("div").find("dd:last>a").attr("href");

find('dd:last>a')で、一番最後にあるddの直下のa要素を選択しています。目的の要素がどれだけ深い位置にあり、入り組んだhtmlとなっていても、find()で正しく指定すれば1行のコードで事足ります。

children()はfind()のようなことはできません。children()は直下の要素しか取得できませんので、find()で行ったのと同じ事をするには、下のような冗長なコードになってしまいます。

var a = $("div").children().children('dd:last').children().attr("href");

そのかわりchildren()は、直下の要素だけをまとめて取得したい場合に重宝します。

<ul>
  <li>8581</li>
  <li>2290</li>
  <li>324</li>
  <li>1292</li>
  <li>9823</li>
</ul>

例えばこのようなリストがあり、数字をすべて足したいとすると、children()を使った以下のようなコードが考えられます。

//ulをクリックでリスト中のすべての数値を加算
$("ul").click(function(){
  var obj = $(this).children();
  num = 0;
  for( var i=0;i<obj.length;i++ ){
    num += parseInt( obj.eq(i).text() );
  }
  alert( num );//22310
});

ちなみに上の例ですと、$(this).children()の部分を$(this).find('li')にすると同じことができるのですが、find()だと今度は下のような場合に異なった値となります。

<ul>
  <li>8581</li>
  <li>2290</li>
  <li>324
  <ul>
    <li>5329</li>
    <li>231</li>
    <li>2111</li>
  </ul>
  </li>
  <li>1292</li>
  <li>9823</li>
</ul>
<script>
//ulをクリックでリスト中のすべての数値を加算
$("ul").click(function(){
  //children版
  var obj = $(this).children();
  num = 0;
  for( var i=0;i<obj.length;i++ ){
    num += parseInt( obj.eq(i).text() );
  }
  alert( num );//22310になる

  //find版
  var obj = $(this).find('li');
  num = 0;
  for( var i=0;i<obj.length;i++ ){
    num += parseInt( obj.eq(i).text() );
  }
  alert( num );//29881になる
});
</script>

リストの中に入れ子で別のリストがあるのですが、children()の場合は、外側の<ul>直下の<li>内の数値だけを加算しているのですが、find()は全ての<li>内の数値を加算しています。

ということで、直下の要素に限定して取得したい場合には、find()よりchildren()の方が良いでしょう。