これまた業務中に方法を調べたものについてまとめ。
今回は、指定した要素の直下の子要素を取得する方法です。
参考にさせていただいたサイトはこちら。
子要素を取得する方法には、children() メソッドと、find() メソッドを使う、二通りの方法があります。
なお、私は children() メソッドを使いました。
使い方はこんな感じ。
1 | var children = $("#parent").children("span"); |
1 2 3 | <div id="parent"> <span>子要素です</span></div> |
上記のようにすると、id に parent が指定された要素の直下にある子要素の span を取得できます。
要素名を指定すればOKなので、id名 や class名 がわからなくても使うことができます。
取得したい子要素の class名 や id名 が分かっている場合は、find() メソッドを使用します。
サンプルコードはこちら。
1 | var children = $("#parent").find(".children"); |
1 2 3 4 | <div id="parent"> <div class="children">子要素1です</div> <div class="children">子要素2です</div></div> |
こちらを実行すると、id 名が parent 要素の子要素である class 名が children が指定された要素を取得することができます。
なお、この find() メソッドは、子要素だけでなく、孫要素も対象となっているので、子要素の中にさらに class=children が指定された要素があれば、その孫要素も取得できます。
一括でごっそりと要素を取得したいときに便利そうですね。
ということで、以上、要素直下の子要素を取得する方法でした。
また、昨日の記事で紹介した、クラス名を取得する attr() メソッドをあわせて使えば、親要素が parent である span 要素のクラス名を取得する、ということも出来ちゃいます。
単体では使い道があまりないかもしれませんが…こういった合わせ技をしたいときにすごく便利なメソッドですね。
なお、昨日の記事はこちらから。
こちらも参考になれば幸いです。
