jQueryで子要素を取得する方法:children(), find()

今回は、jQueryで子要素を取得する方法を3つに分けて説明します。

直下の子要素を取得する.children()

要素内の全ての子要素を取得します。children('セレクタ')のように、セレクタを引数に渡すことで子要素を絞り込むこともできます。 (例1)#parentの子要素の中から、imgタグのみ取得する

HTML

jQuery

なおchildren()メソッドでは、孫要素は取得されません。

全ての子孫要素から取得する.find()

children()では、取得できるのは直下の子要素のみでしたが、find()では子要素の子要素も含む全ての子孫要素から条件を指定して取得できます。 (例2)#parentの子要素の中から.child-imageを取得する

HTML

jQuery

セレクタを使って子要素を取得する

またメソッドではなく、シンプルにセレクタを使って指定することもできます。

HTML

jQuery

子要素のn番目の要素を指定

最初の子要素、最後の子要素、2番目の子要素など指定することができます。指定の仕方は、CSSのセレクタと似ています。

HTML

最初(jQuery)

最後(jQuery)

2番目(jQuery)


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集

イベント