【jQuery】指定した要素の子要素を取得する方法の一覧!

指定した要素の子要素を取得するには&(親要素 子要素)と指定することが多いかもしれませんが、children()メソッドやfind()メソッド、:only-child、:first-child、:last-childなど様々な方法で取得することができます。

例えば、子要素の一番後ろを取得したい場合にchildren()のパラメータにクラス名を指定して取得したりすることがあるかと思いますが、それはセレクタに:last-childを指定したり、last()メソッドを使用するだけで取得することが可能になります。

つまり、少し長いコードで子要素を取得していた場合でも、簡単なコードで子要素を取得できたりします。

その為、もし、子要素を取得する場合に、どの方法で取得すればよいのかを調べる際にこのページが参考になればと思います。

今回は、jQueryで指定した要素の子要素を取得する方法の一覧について以下の内容で解説していきます。

⚫︎ 親要素から指定して子要素を取得する場合
⚫︎ 「>」で子要素を取得する場合
⚫︎ :only-childで子要素を取得する場合
⚫︎ :first-dhild/:last-childで子要素を取得する場合
⚫︎ :nth-child()で子要素を取得する場合
⚫︎ :eq()で子要素を取得する場合

⚫︎ children()で子要素を取得する場合
⚫︎ contents()で子要素を取得する場合
⚫︎ eq()で子要素を取得する場合
⚫︎ find()で子要素を取得する場合
⚫︎ filter()で子要素を取得する場合
⚫︎ first()やlast()で子要素を取得する場合

セレクタ関係で子要素を取得する方法の一覧

セレクタ関係で子要素を取得する方法の一覧を紹介します。

親要素から指定して子要素を取得する場合

セレクタに親要素から指定して子要素の取得を行ってみます。

sample.html

index.js

実行結果

セレクタに親要素から指定して子要素を取得しています。

「>」で子要素を取得する場合

「>」で指定した要素の子要素を取得してみます。

sample.html

index.js

実行結果

「>」で指定した要素の子要素を取得しています。

:only-childで子要素を取得する場合

:only-childで子要素の取得を行ってみます。

sample.html

index.js

実行結果

:only-childを指定することで指定した要素の子要素を取得しています。

:only-childついて詳しく知りたい場合はこちらをご参考ください。

:first-dhild/:last-childで子要素を取得する場合

:first-dhild/:last-childで指定した要素の子要素の取得を行ってみます。

sample.html

index.js

実行結果

:first-childや:last-childで指定した要素の子要素を取得しています。

:first-childついて詳しく知りたい場合はこちらをご参考ください。

:last-childついて詳しく知りたい場合はこちらをご参考ください。

:nth-childで子要素を取得する場合

:nth-childで子要素の取得を行ってみます。

sample.html

index.js

実行結果

:nth-childで子要素を取得しています。

jQueryでの:nth-childについて詳しく知りたい場合はこちらをご参考ください。

jQueryのメソッドを使用して子要素を取得する方法の一覧

jQueryのメソッドを使用して子要素を取得する方法の一覧を紹介します。

children()で子要素を取得する場合

children()メソッドで子要素の取得を行ってみます。

sample.html

index.js

実行結果

children()メソッドで指定した要素の子要素を取得しています。

jQueryのchildren()メソッドについて詳しく知りたい場合はこちらをご参考ください。

contents()で子要素を取得する場合

contents()メソッドで指定した要素の子要素を取得しています。

sample.html

index.js

実行結果

contents()メソッドで指定した要素の子要素を取得しています。

jQueryのcontents()メソッドについて詳しく知りたい場合はこちらをご参考ください。

eq()で子要素を取得する場合

eq()メソッドで子要素の取得を行ってみます。

sample.html

index.js

実行結果

eq()メソッドで指定した要素の子要素を取得しています。

jQueryのeq()メソッドについて詳しく知りたい場合はこちらをご参考ください。

find()で子要素を取得する場合

find()メソッドで指定した要素の子要素を取得しています。

sample.html

index.js

実行結果

find()メソッドで指定した要素の子要素を取得しています。

jQueryのfind()メソッドについて詳しく知りたい場合はこちらをご参考ください。

filter()で子要素を取得する場合

filter()メソッドで指定した要素の子要素を取得してみます。

sample.html

index.js

実行結果

filter()メソッドで指定した要素の子要素を取得しています。

jQueryのfilter()メソッドについて詳しく知りたい場合はこちらをご参考ください。

first()やlast()で子要素を取得する場合

first()メソッドやlast()メソッドで指定した要素の子要素を取得してみます。

sample.html

index.js

実行結果

first()メソッドやlast()メソッドで指定した要素の子要素を取得しています。

jQueryのfirst()メソッドについて詳しく知りたい場合はこちらをご参考ください。

jQueryのlast()メソッドについて詳しく知りたい場合はこちらをご参考ください。

今回のポイント

指定した要素の子要素を取得するには様々な方法がある

⚫︎ 指定した要素の子要素を取得するにはセレクタ関係で子要素を取得する方法jQueryのメソッドを使用して取得する方法がある

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報