【jQuery】:nth-childで指定した順番の子要素を指定する!

jQueryで指定した順番の子要素を指定するには:nth-childを使用します。

:nth-childは、各親要素に対して指定した順番の子要素を取得することができる擬似クラスであり、n番目の子要素や偶数番号の子要素、奇数番号の子要素などの特定の子要素を指定することができます。

そして、:nth-childに数式を指定することで決まった法則で子要素を指定することができます。

また、指定した順番の要素を指定するには:eqもありますが、:要素をひとつだけ指定する:eqに対して、:nth-childは各親要素の子要素を指定する為、複数の要素を指定するようになります。

今回は、jQueryで:nth-childを使って指定した順番の子要素を指定する方法を以下の内容で解説していきます。

⚫︎ n番目の子要素を指定する場合
⚫︎ 偶数番目の子要素を指定する場合
⚫︎ 奇数番目の子要素を指定する場合
⚫︎ 決まった法則で子要素を指定する場合

⚫︎ jQueryを使用せずに指定した順番の子要素を指定する方法
⚫︎ :nth-childと:eq()との違い

ハルトさん

今回はjQueryで:nth-childを使用して指定した順番の子要素を指定する方法について説明していきます。

さとみさん

はい!
お願いします!

:nth-childとは

:nth-childとは、指定された数字の子要素を指定する擬似クラスとなります。

:nth-childの書き方

:nth-childの書き方は下記となります。

セレクターの後にnth-childを追記し、()の中にインデックスを指定することで、セレクター要素のn番目の子要素を指定することができます。
開始のインデックスは1からになります。

また、()にevenを指定することで偶数番目の子要素が指定され、oddを指定することで奇数番目の子要素が指定されます。

そして、()に数式を指定することで数式の順番で子要素を指定することができます。

指定した順番の子要素を指定するサンプルコード

指定した順番の子要素を指定するサンプルコードを紹介します。

n番目の子要素を指定する場合

n番目の子要素を指定する場合は、:nth-childにインデックスを指定します。

sample.html

index.js

出力結果

:nth-childにインデックスを指定することでn番目の子要素を指定することができます。
その為、btn1クラスのボタンを押すと2番目の子要素の背景色が変化し、btn2クラスのボタンを押すと3番目の子要素の背景色が変化します。

偶数番目の行に子要素を指定する場合

偶数番目の行に子要素を指定する場合は、:nth-childにevenを指定します。

sample.html

index.js

出力結果

:nth-childにevenを指定することで、偶数番目の子要素を指定することができます。
その為、ボタンを押すと、2番目と4番目の子要素の背景色が変化します。

奇数番目の子要素を指定する場合

奇数番目の子要素を指定する場合は、nth-childにoddを指定します。

sample.html

index.js

出力結果

nth-childにoddを指定したことで、奇数番目の子要素を指定することができます。
その為、ボタンを押すと1番目と3番目の要素の背景色が変化します。

決まった法則で子要素を指定する場合

決まった法則で子要素を指定する場合は、:nth-childにan+bというパターン数式を指定します。
パターン数式を指定することで「n番目からm個ごと」にといったように、決まった法則で子要素を指定することができます。

sample.html

index.js

出力結果

:nth-child:に数式を指定することで、決まった法則で子要素を指定することができます。
その為、btn1クラスのボタンを押すと1番目と4番目の子要素の背景色が変化し、btn2クラスのボタンを押すと2番と4番目子要素の背景色が変化します。

さとみさん

:nth-childに数式を指定することもできるんですね!

ハルトさん

そうですね。
:nth-child:に数式を指定すると、数列の値が番号となって子要素を指定することができます。
例えば、an=3n+2だと{2, 5, 8, …}である為2番目、5番目、8番目の子要素が指定されます。

jQueryを使用せずに指定した順番の子要素を指定する方法

jQueryを使用せず、純粋なJavaScriptで指定した順番の子要素を指定してみます。

sample.html

index.js

出力結果

2番目と3番目の子要素の背景色が変化していることから、純粋なJavaScrioptでも:nth-childを使用して指定した順番の子要素を指定しています。

:nth-childと:eqとの違い

子要素指定するには:nth-childの他にも:eqがありますが、以下のような違いがあります。

⚫︎ 開始のインデックスが異なる
(:nth-childの場合は1がスタートで:eqの場合は0がスタート)
⚫︎ 指定する要素のインデックスが異なる
(:nth-childの場合は親要素ごとで指定した要素のインデックスが区切られ、:eqの場合は指定した要素のインデックスが区切られない)

sample.html

style.css

index.js

出力結果

:nth-childで要素を指定する場合は親要素ごとにインデックスがリセットされますが、:eqで要素を指定する場合はインデックスがリセットされません。
その為、btn1クラスのボタンを押すと指定したそれぞれの要素の3番目の背景色が変化し、btn2クラスのボタンを押すと指定した要素の4番目と11番目の背景色が変化しています。

今回のポイント

nth-childで指定した順番の子要素を指定

⚫︎ jQueryで指定した順番の子要素を指定するには:nth-childを使用する

⚫︎ n番目に指定した子要素を指定する場合は、nth-childに整数を指定する

⚫︎ 偶数番目に指定した子要素を指定する場合は、:nth-childにevenを指定する

⚫︎ 奇数番目に指定した子要素を指定する場合は、:nth-childにoddを指定します。

⚫︎ 決まった法則で指定した子要素を指定する場合は、nth-childにan+bというパターン数式を指定する

⚫︎ :nth-childと:eqは開始のインデックスが異なることと指定する要素のインデックスが異なるという違いがある

Writer
壷井

壷井

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

最新の案件情報

フリーランスエンジニアの案件探し