jQueryで要素のn番目を指定して操作する２つの方法

以前「cssでn番目を指定する方法」をご紹介しましたが、javascriptでも同様のことができたら便利だと思いませんか？そこで今回はjQueryで要素のn番目を指定する方法をご紹介します。cssでの指定方法とはまたちがった概念もありますので、是非最後まで見てみてください。

要素の〇番目を指定するeqメソッド

基本の使い方

jQueryで要素のn番目を指定したい場合はeqというメソッドを使います。
ひとまず要素（li）の3番目を指定する場合のサンプルを下記でご確認ください。

結果

• 1
• 2
• 3
• 4
• 5
• 6

eqメソッドで順番を示す場合、一つ目の要素を0番目と捉えるため、3番目を指定する場合は0、1、2と数えて、「eq(2)」と指定することになります。

最後から数えてn番目を指定する方法

結果

• 1
• 2
• 3
• 4
• 5
• 6

eqの数値にマイナス（–）を付けて記述すると最後の要素から数えてn番目の要素を指定することができます。eq(-1)が一番最後の要素を示すので、最後から３番目の要素を指定する場合はeq(-3)となります。

eqメソッドを使う場合の注意点

上記のように、liの子要素の中にliが含まれている場合「$(‘li’).eq(2).css(‘background-color’, ‘#f00’);」と指定すると「B」が指定されます。これは、親要素と子要素の違いは関係なくliの数を最初から数えて３個目が指定された結果ということになります。もし子要素の「li」を除外し、親要素だけを数えた3番目「う」という結果を得たい場合は次のように記述します。

notメソッドを使って、子要素のli（ul li li）を除外しています。これで、親要素のみを数えて３番目「う」の要素を取得することができます。

上記注意点を踏まえてeqの便利な使い方

先ほど「.eq()」は親要素、子要素に関係なく指定された要素をカウントすると説明しましたが、違う見方をすると取得したい要素の出現数を親子関係なくカウントできるというになります。
文章だけの説明では伝わりずらいと思うので、例を使って説明します。

サンプルhtml

このように、タイトルと本文を繰り返すdiv.boxの要素があったとします。ここから三番目の記事Cのタイトルであるh3を指定するとします。タグの意味から考えると、３つ目の.boxの中のh3ということになりますが、.eq()はタグの意味は関係なく、h3が出現した回数をカウントします。つまり3番目の記事のタイトルh3は、h3の数だけをカウントすると３つ目ということで、.eq()でこれを取得する場合は次のようになります。

これで、記事Cのタイトルであるh3を指定したことになるのですが、注意したい点としては、これは、.box h3をカウントした結果なのでもし.box内にh3が配置されてないものがあったり、.box内でh3が複数回使われていたりするとカウントがずれてしまいます。

サンプルhtmlで言うと、もし記事Bのタイトルh3が存在しない場合の「$(‘.box h3’).eq(2)」は、.boxの数は関係なくh3を順に3回カウントするので、.boxを順番に数えて3番目の記事Cのタイトルが指定されるのではなく、h3を順に数えて3番目の記事Dのタイトルが指定されるということになります。
ですので、このような方法で.eq()を使う場合は、カウントする要素が抜けたり、多く配置されることがないように注意する必要があります。

疑似要素:nth-child()を使う方法

jQueryで要素のn番目を指定するもう一つの方法は、疑似要素「:nth-child()」を使う方法です。cssでn番目を指定する方法として使われる「:nth-child()」ですが、jQueryでも有効に利用することができます。「:nth-child()」の使い方さえ知っていればjQueryでも設定は簡単です。
例として前から３番目を指定してみます。

結果

• 1
• 2
• 3
• 4
• 5
• 6

:nth-child()を使うと、〇番目を指定する以外にも、偶数のみ指定、奇数のみ指定などの設定も可能です。
:nth-child()の使い方については『【css】これは便利！奇数、偶数、等間隔など～番目を指定する方法「:nth-child()」と「:nth-last-child」』という記事で解説しておりますので、是非確認してみてください。