jQueryで指定した順番の子要素を指定するには:nth-child を使用します。
:nth-childは、各親要素に対して指定した順番の子要素を取得することができる擬似クラスであり、n番目の子要素や偶数番号の子要素、奇数番号の子要素などの特定の子要素を指定することができます。
そして、:nth-childに数式を指定することで決まった法則で子要素を指定することができます。
また、指定した順番の要素を指定するには:eqもありますが、:要素をひとつだけ指定する:eqに対して、:nth-childは各親要素の子要素を指定する為、複数の要素を指定するようになります。
今回は、jQueryで:nth-childを使って指定した順番の子要素を指定する方法 を以下の内容で解説していきます。
ハルトさん
今回はjQueryで:nth-childを使用して指定した順番の子要素を指定する方法について説明していきます。
さとみさん
:nth-childとは
:nth-childとは、指定された数字の子要素を指定する擬似クラスとなります。
:nth-childの書き方
:nth-childの書き方は下記となります。
$ ( セレクター: nth - child ( インデックス( even or odd or 数式) ) . イベント
セレクターの後にnth-childを追記し、()の中にインデックスを指定することで、セレクター要素のn番目の子要素を指定することができます。
また、()に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
$ ( 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番目の子要素を指定することができます。
偶数番目の行に子要素を指定する場合
偶数番目の行に子要素を指定する場合は、: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
$ ( function ( ) {
$ ( ".btn1" ) . click ( function ( ) {
$ ( "tr td:nth-child(even)" ) . css ( "background" , "skyblue" ) ;
} ) ;
} ) ;
出力結果
:nth-childにevenを指定することで、偶数番目の子要素を指定することができます。
奇数番目の子要素を指定する場合
奇数番目の子要素を指定する場合は、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
$ ( function ( ) {
$ ( ".btn1" ) . click ( function ( ) {
$ ( "tr td:nth-child(odd)" ) . css ( "background" , "brawn" ) ;
} ) ;
} ) ;
出力結果
nth-childにoddを指定したことで、奇数番目の子要素を指定することができます。
決まった法則で子要素を指定する場合
決まった法則で子要素を指定する場合は、:nth-childにan+bというパターン数式 を指定します。
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
$ ( 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:に数式を指定することで、決まった法則で子要素を指定することができます。
さとみさん
:nth-childに数式を指定することもできるんですね！
ハルトさん
そうですね。
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
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がありますが、以下のような違いがあります。
⚫︎ 開始のインデックスが異なる 1がスタート で:eqの場合は0がスタート )指定する要素のインデックスが異なる 親要素ごとで指定した要素のインデックスが区切られ 、: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
div {
border : solid black 1px ;
display : inline - block ;
}
index.js
$ ( 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で要素を指定する場合はインデックスがリセットされません。
今回のポイント nth-childで指定した順番の子要素を指定
⚫︎ jQueryで指定した順番の子要素を指定するには:nth-child を使用する
⚫︎ n番目に指定した子要素を指定する場合は、nth-childに整数 を指定する
⚫︎ 偶数番目に指定した子要素を指定する場合は、:nth-childにeven を指定する
⚫︎ 奇数番目に指定した子要素を指定する場合は、:nth-childにodd を指定します。
⚫︎ 決まった法則で指定した子要素を指定する場合は、nth-childにan+bというパターン数式 を指定する
⚫︎ :nth-childと:eqは開始のインデックスが異なる ことと指定する要素のインデックスが異なる という違いがある
Writer
ST
株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。
