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

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

以前「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)が一番最後の要素を示すので、最後から3番目の要素を指定する場合はeq(-3)となります。

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

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

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

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

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

結果

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

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