jQueryでfindとchildrenを使い分ける

findとchildren

findとchildrenはどちらも指定した要素が持つ子要素を取得するメソッドです。二つの詳しい書式は以下の通りです。

find

find(String or 条件式)

findは指定要素が持つ全子孫要素から、指定条件式に合致するものを取得します。この関数は、処理中の要素から更に絞込みをかけるのに非常に便利です。
children

children(String or 子要素を絞り込む条件式)

childrenは要素内の全ての子要素を取得します。取得される要素は直下にある子要素のみで、孫要素以下は対象外となります。子要素以外を取得する場合は、条件式を渡して取得される子要素を更に絞り込むことで取得することができます。

findとchildrenの使い分け

childrenが直下の要素だけを取得するのに対し、findは全ての子要素を探索するという違いがあります。childrenでfindと同じことができなくもありませんが、一般的にはfindが多く使われます。findは強力な検索機能を持っており、コードもすっきり書くことができます。

<div>
  <ul>
    <li><a href="./aaa.html">あいうえお</a></li>
    <li><a href="./bbb.html">かきくけこ</a></li>
    <li><a href="./ccc.html">さしすせそ</a></li>
  </ul>
</div>

例えば上記のようなdivから一番最後のリンク先を取得したい場合は以下のようになります。

$("div").find("li:last>a").attr("href");

逆にchildrenは直下の子要素だけをまとめて取得したい場合に用いられます。

<ul>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
  <li>たちつてと</li>
</ul>

上記のようなリスト構造があったとき、子要素であるliの値をすべて取得するには以下のようになります。

$("ul").children();

直下の要素に限定してまとめて取得したい場合はchildrenが良いとされています。

以上こちらのサイトを参考にさせていただきました。