【jQuery】要素直下の子要素を取得する方法

これまた業務中に方法を調べたものについてまとめ。
今回は、指定した要素の直下の子要素を取得する方法です。

参考にさせていただいたサイトはこちら。

jQueryで子要素を取得する方法：children(), find()
http://uxmilk.jp/10873

子要素を取得する方法には、children() メソッドと、find() メソッドを使う、二通りの方法があります。
なお、私は children() メソッドを使いました。

使い方はこんな感じ。

var children = $("#parent").children("span");

<div id="parent">
    <span>子要素です</span>
</div>

上記のようにすると、id に parent が指定された要素の直下にある子要素の span を取得できます。
要素名を指定すればOKなので、id名 や class名 がわからなくても使うことができます。

取得したい子要素の class名 や id名 が分かっている場合は、find() メソッドを使用します。
サンプルコードはこちら。

var children = $("#parent").find(".children");

<div id="parent">
    <div class="children">子要素1です</div>
    <div class="children">子要素2です</div>
</div>

こちらを実行すると、id 名が parent 要素の子要素である class 名が children が指定された要素を取得することができます。
なお、この find() メソッドは、子要素だけでなく、孫要素も対象となっているので、子要素の中にさらに class=children が指定された要素があれば、その孫要素も取得できます。
一括でごっそりと要素を取得したいときに便利そうですね。

ということで、以上、要素直下の子要素を取得する方法でした。
また、昨日の記事で紹介した、クラス名を取得する attr() メソッドをあわせて使えば、親要素が parent である span 要素のクラス名を取得する、ということも出来ちゃいます。
単体では使い道があまりないかもしれませんが…こういった合わせ技をしたいときにすごく便利なメソッドですね。

なお、昨日の記事はこちらから。

【jQuery】要素に指定したclass名などの属性の値を取得する方法

こちらも参考になれば幸いです。