以前「cssでn番目を指定する方法」をご紹介しましたが、javascriptでも同様のことができたら便利だと思いませんか？そこで今回はjQueryで要素のn番目を指定する方法をご紹介します。cssでの指定方法とはまたちがった概念もありますので、是非最後まで見てみてください。
要素の〇番目を指定するeqメソッド
基本の使い方
jQueryで要素のn番目を指定したい場合はeqというメソッドを使います。
ひとまず要素（li）の3番目を指定する場合のサンプルを下記でご確認ください。
|
1 2 3 4 5 6 7 8 |
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> |
|
1 |
$('li').eq(2).css('background-color', '#f00'); |
結果
- 1
- 2
- 3
- 4
- 5
- 6
eqメソッドで順番を示す場合、一つ目の要素を0番目と捉えるため、3番目を指定する場合は0、1、2と数えて、「eq(2)」と指定することになります。
最後から数えてn番目を指定する方法
|
1 2 3 4 5 6 7 8 |
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> |
|
1 |
$('li').eq(-1).css('background-color', '#f00'); |
結果
- 1
- 2
- 3
- 4
- 5
- 6
eqの数値にマイナス（–）を付けて記述すると最後の要素から数えてn番目の要素を指定することができます。eq(-1)が一番最後の要素を示すので、最後から３番目の要素を指定する場合はeq(-3)となります。
eqメソッドを使う場合の注意点
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul> <li> あ <ul> <li>A</li> <li>B</li> </ul> </li> <li>い</li> <li>う</li> <li>え</li> <li>お</li> </ul> |
上記のように、liの子要素の中にliが含まれている場合「$(‘li’).eq(2).css(‘background-color’, ‘#f00’);」と指定すると「B」が指定されます。これは、親要素と子要素の違いは関係なくliの数を最初から数えて３個目が指定された結果ということになります。もし子要素の「li」を除外し、親要素だけを数えた3番目「う」という結果を得たい場合は次のように記述します。
|
1 |
$('li').not('ul li li').eq(2).css('background-color', '#f00'); |
notメソッドを使って、子要素のli（ul li li）を除外しています。これで、親要素のみを数えて３番目「う」の要素を取得することができます。
疑似要素:nth-child()を使う方法
jQueryで要素のn番目を指定するもう一つの方法は、疑似要素「:nth-child()」を使う方法です。cssでn番目を指定する方法として使われる「:nth-child()」ですが、jQueryでも有効に利用することができます。「:nth-child()」の使い方さえ知っていればjQueryでも設定は簡単です。
例として前から３番目を指定してみます。
|
1 2 3 4 5 6 7 8 |
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> |
|
1 |
$('li:nth-child(3)').css('background-color', '#f00'); |
結果
- 1
- 2
- 3
- 4
- 5
- 6
:nth-child()を使うと、〇番目を指定する以外にも、偶数のみ指定、奇数のみ指定などの設定も可能です。
:nth-child()の使い方については『【css】これは便利！奇数、偶数、等間隔など～番目を指定する方法「:nth-child()」と「:nth-last-child」』という記事で解説しておりますので、是非確認してみてください。
