JQueryで子要素を取得するメソッド

findメソッド

findメソッドは、すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得したいときに用いる。

下図の例では、<div id="wrapper">から</div>の中にあるすべての<a>要素を取得することができる。

<div di="wrapper">
    <a href="#">リンク１</a>
    <p>
        <a href="#">リンク2</a>
    </p>
</div>

リンク１、２両方にcssが適用される。

$('#wrapper').find('a').css('color','red');

childrenメソッド

childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに用いる。

下の例では<div id="wrapper">の子要素は<a>タグと<p>タグが一つずつなので、<a>タグが一つ取得される。

<div di="wrapper">
    <a href="#">リンク１</a>
    <p>
        <a href="#">リンク2</a>
    </p>
</div>

リンク１のみにcssが適用される。

$('#wrapper').children('a').css('color','red');