【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の書き方は下記となります。
|
1 |
$(セレクター:nth-child(インデックス(even or odd or 数式)).イベント |
セレクターの後にnth-childを追記し、()の中にインデックスを指定することで、セレクター要素のn番目の子要素を指定することができます。
開始のインデックスは1からになります。
また、()にevenを指定することで偶数番目の子要素が指定され、oddを指定することで奇数番目の子要素が指定されます。
そして、()に数式を指定することで数式の順番で子要素を指定することができます。
指定した順番の子要素を指定するサンプルコード
指定した順番の子要素を指定するサンプルコードを紹介します。
n番目の子要素を指定する場合
n番目の子要素を指定する場合は、:nth-childにインデックスを指定します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h2>n番目の子要素を指定する</h2> <table border="1" style="border-collapse: collapse"> <tbody> <tr> <th style="width:20%">名前</th> <th style="width:20%">価格</th> <th style="width:20%">会社</th> </tr> <tr> <td>Switch</td> <td>29980</td> <td>任天堂</td> </tr> <tr> <td>PS4</td> <td>39980</td> <td>Sony</td> </tr> <tr> <td>PS4Pro</td> <td>44980</td> <td>ソニー</td> </tr> <tr> <td>PS5</td> <td>49980</td> <td>ソニー</td> </tr> <tr> <td>メガドライブ</td> <td>49800</td> <td>セガ</td> </tr> <tr> <td>Wii</td> <td>25000</td> <td>任天堂</td> </tr> </tbody> </table> <input type= "button" class= "btn1" value= "2番目の子要素を指定"> <input type= "button" class= "btn2" value= "3番目の子要素を指定"> <script src="index.js"></script> </body> </html> |
index.js
|
1 2 3 4 5 6 7 8 |
$(function(){ $(".btn1").click(function() { $("tr td:nth-child(2)").css("background", "yellowgreen"); }); $(".btn2").click(function() { $("tr td:nth-child(3)").css("background", "tomato"); }); }); |
出力結果
:nth-childにインデックスを指定することでn番目の子要素を指定することができます。
その為、btn1クラスのボタンを押すと2番目の子要素の背景色が変化し、btn2クラスのボタンを押すと3番目の子要素の背景色が変化します。
偶数番目の行に子要素を指定する場合
偶数番目の行に子要素を指定する場合は、:nth-childにevenを指定します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h2>偶数の子要素を指定する</h2> <table border="1" style="border-collapse: collapse"> <tbody> <tr> <th style="width:20%">名前</th> <th style="width:20%">価格</th> <th style="width:20%">会社</th> <th style="width:20%">販売年</th> </tr> <tr> <td>Switch</td> <td>29980</td> <td>任天堂</td> <td>2017</td> </tr> <tr> <td>PS4</td> <td>39980</td> <td>Sony</td> <td>2013</td> </tr> <tr> <td>PS4Pro</td> <td>44980</td> <td>ソニー</td> <td>2016</td> </tr> <tr> <td>PS5</td> <td>49980</td> <td>ソニー</td> <td>2020</td> </tr> <tr> <td>メガドライブ</td> <td>49800</td> <td>セガ</td> <td>1988</td> </tr> <tr> <td>Wii</td> <td>25000</td> <td>任天堂</td> <td>2006年</td> </tr> </tbody> </table> <input type= "button" class= "btn1" value= "偶数の子要素を指定"> <script src="index.js"></script> </body> </html> |
index.js
|
1 2 3 4 5 |
$(function(){ $(".btn1").click(function() { $("tr td:nth-child(even)").css("background", "skyblue"); }); }); |
出力結果
:nth-childにevenを指定することで、偶数番目の子要素を指定することができます。
その為、ボタンを押すと、2番目と4番目の子要素の背景色が変化します。
奇数番目の子要素を指定する場合
奇数番目の子要素を指定する場合は、nth-childにoddを指定します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h2>奇数の子要素を指定する</h2> <table border="1" style="border-collapse: collapse"> <tbody> <tr> <th style="width:20%">名前</th> <th style="width:20%">価格</th> <th style="width:20%">会社</th> <th style="width:20%">販売年</th> </tr> <tr> <td>Switch</td> <td>29980</td> <td>任天堂</td> <td>2017</td> </tr> <tr> <td>PS4</td> <td>39980</td> <td>Sony</td> <td>2013</td> </tr> <tr> <td>PS4Pro</td> <td>44980</td> <td>ソニー</td> <td>2016</td> </tr> <tr> <td>PS5</td> <td>49980</td> <td>ソニー</td> <td>2020</td> </tr> <tr> <td>メガドライブ</td> <td>49800</td> <td>セガ</td> <td>1988</td> </tr> <tr> <td>Wii</td> <td>25000</td> <td>任天堂</td> <td>2006年</td> </tr> </tbody> </table> <input type= "button" class= "btn1" value= "奇数の子要素を指定"> <script src="index.js"></script> </body> </html> |
index.js
|
1 2 3 4 5 |
$(function(){ $(".btn1").click(function() { $("tr td:nth-child(odd)").css("background", "brawn"); }); }); |
出力結果
nth-childにoddを指定したことで、奇数番目の子要素を指定することができます。
その為、ボタンを押すと1番目と3番目の要素の背景色が変化します。
決まった法則で子要素を指定する場合
決まった法則で子要素を指定する場合は、:nth-childにan+bというパターン数式を指定します。
パターン数式を指定することで「n番目からm個ごと」にといったように、決まった法則で子要素を指定することができます。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h2>決まった法則で子要素を指定する</h2> <table border="1" style="border-collapse: collapse"> <tbody> <tr> <th style="width:20%">名前</th> <th style="width:20%">価格</th> <th style="width:20%">会社</th> <th style="width:20%">販売年</th> </tr> <tr> <td>Switch</td> <td>29980</td> <td>任天堂</td> <td>2017</td> </tr> <tr> <td>PS4</td> <td>39980</td> <td>Sony</td> <td>2013</td> </tr> <tr> <td>PS4Pro</td> <td>44980</td> <td>ソニー</td> <td>2016</td> </tr> <tr> <td>PS5</td> <td>49980</td> <td>ソニー</td> <td>2020</td> </tr> <tr> <td>メガドライブ</td> <td>49800</td> <td>セガ</td> <td>1988</td> </tr> <tr> <td>Wii</td> <td>25000</td> <td>任天堂</td> <td>2006年</td> </tr> </tbody> </table> <input type= "button" class= "btn1" value= "数式で子要素を指定"> <input type= "button" class= "btn2" value= "数式で子要素を指定"> <script src="index.js"></script> </body> </html> |
index.js
|
1 2 3 4 5 6 7 8 |
$(function(){ $(".btn1").click(function() { $("tr td:nth-child(3n+1)").css("background", "red"); }); $(".btn2").click(function() { $("tr td:nth-child(2n)").css("background", "gold"); }); }); |
出力結果
: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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2>JavaScriptで指定した順番の子要素を指定する</h2> <table border="1" style="border-collapse: collapse"> <tbody> <tr> <th style="width:20%">名前</th> <th style="width:20%">価格</th> <th style="width:20%">会社</th> <th style="width:20%">販売年</th> </tr> <tr> <td>Switch</td> <td>29980</td> <td>任天堂</td> <td>2017</td> </tr> <tr> <td>PS4</td> <td>39980</td> <td>Sony</td> <td>2013</td> </tr> <tr> <td>PS4Pro</td> <td>44980</td> <td>ソニー</td> <td>2016</td> </tr> <tr> <td>PS5</td> <td>49980</td> <td>ソニー</td> <td>2020</td> </tr> <tr> <td>メガドライブ</td> <td>49800</td> <td>セガ</td> <td>1988</td> </tr> <tr> <td>Wii</td> <td>25000</td> <td>任天堂</td> <td>2006年</td> </tr> </tbody> </table> <input type= "button" class= "btn1" value= "3番目の子要素を指定"> <input type= "button" class= "btn2" value= "2番目の子要素を指定"> <script src="index.js"></script> </body> </html> |
index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
window.addEventListener("load", function(){ document.querySelectorAll("input[type=button]")[0] .addEventListener("click", function() { var ele = document.querySelectorAll("tr td:nth-child(3)") for(let i = 0; i < ele.length; i++) { ele[i].style.backgroundColor = "gray"; } }); document.querySelectorAll("input[type=button]")[1] .addEventListener("click", function() { var ele = document.querySelectorAll("tr td:nth-child(2)") for(let i = 0; i < ele.length; i++) { ele[i].style.backgroundColor = "purple"; } }); }); |
出力結果
2番目と3番目の子要素の背景色が変化していることから、純粋なJavaScrioptでも:nth-childを使用して指定した順番の子要素を指定しています。
:nth-childと:eqとの違い
子要素指定するには:nth-childの他にも:eqがありますが、以下のような違いがあります。
⚫︎ 開始のインデックスが異なる
(:nth-childの場合は1がスタートで:eqの場合は0がスタート)
⚫︎ 指定する要素のインデックスが異なる
(:nth-childの場合は親要素ごとで指定した要素のインデックスが区切られ、:eqの場合は指定した要素のインデックスが区切られない)
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h2>:nth-childと:eqの違い</h2> <div> <p>p要素1</p> <p>p要素2</p> <p>p要素3</p> <p>p要素4</p> <p>p要素5</p> </div> <div> <p>p要素6</p> <p>p要素7</p> <p>p要素8</p> <p>p要素9</p> <p>p要素10</p> </div> <div> <p>p要素11</p> <p>p要素12</p> <p>p要素13</p> <p>p要素14</p> <p>p要素15</p> </div> <input type= "button" class= "btn1" value= ":nth-childで要素を指定"> <input type= "button" class= "btn2" value= ":eqで要素を指定"> <script src="index.js"></script> </body> </html> |
style.css
|
1 2 3 4 |
div { border: solid black 1px; display: inline-block; } |
index.js
|
1 2 3 4 5 6 7 8 9 |
$(function(){ $(".btn1").click(function() { $("div p:nth-child(3)").css("background", "orange"); }); $(".btn2").click(function() { $("div p:eq(3)").css("background", "green"); $("div p:eq(10)").css("background", "green"); }); }); |
出力結果
: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は開始のインデックスが異なることと指定する要素のインデックスが異なるという違いがある
ST
株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。
