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

  • 0
    いいね
  • 0
    コメント

    findメソッド

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

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

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

    リンク1、2両方にcssが適用される。

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

    childrenメソッド

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

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

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

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

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