jQueryでn番目の要素を取得する方法を解説!

jQueryでn番目の要素を取得する方法についてCSSのセレクタで指定する方法とeqメソッドで取得する方法の2種類をサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1jQueryでn番目の要素を取得したい
  2. 2jQueryでn番目の要素を取得する方法
  3. 2.1CSSのセレクタでn番目を指定する
  4. 2.2jQueryのeqメソッドでn番目を指定する

jQueryでn番目の要素を取得したい

jQueryで兄弟要素のグループ内でn番目の要素を取得したい時があります。

n番目の要素を取得するときは

  • CSSのセレクタでn番目を指定する
  • jQueryのeqメソッドでn番目を指定する
という2通りのやり方があります。

今回は2つの方法についてサンプルコード付きで解説します。

Photo byPexels

jQueryでn番目の要素を取得する方法

CSSのセレクタでn番目を指定する

CSSでn番目の要素を取得する方法は:nth-child:nth-of-typeがあります。下記のサンプルコードを見てみましょう。

上記のサンプルコードではCSSのセレクタで:nth-childの擬似クラスを使って2番目の要素を取得しています。

jQueryのeqメソッドでn番目を指定する

jQueryのeqメソッドは引数で指定したインデックス番号の要素を取得できるメソッドです。これを使って2番目の要素を取得してみましょう。

上記のサンプルコードでは2番目(インデックス番号は0から数えるのでインデックス番号は1)の要素をeqメソッドで取得しています。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次