【jQuery】eq()を使って指定した位置の要素を指定する!

指定した位置の要素を指定するにはjQueryのeq()メソッドを使用します。

jQueryのeq()メソッドとは指定した要素のうちパラメータのインデックス番号で指定された要素を選択するメソッドであり、指定した位置の要素を選んで指定することができます。

eq()メソッドは基本、正のインデックをパラメータに指定しますが、負のインデックス番号を指定することで末尾の要素から数えた要素を指定することもできます。

また、指定した位置の要素を指定するには:nth-childもありますが、指定する開始インデックスが異なりますので:nth-childに使い慣れている場合は注意してください。

今回は、jQueryのeq()メソッドを使って指定した要素以外を対象にする方法について以下の内容で解説していきます。

⚫︎ 先頭から指定した位置の要素を指定する場合
⚫︎ 末尾から指定した位置の要素を指定する場合

⚫︎ 指定した位置の複数の要素を指定する方法
⚫︎ セレクタにhas()を直接指定する場合

ハルトさん

今回はjQueryのeq()メソッドで指定した位置の要素を指定する方法について説明していきます。

さとみさん

はい!
お願いします!

eq()とは

eq()とは、マッチした要素から指定したセレクターや条件を満たす要素を除外するメソッドとなります。

eq()の書き方

eq()メソッドの書き方は下記となります。

パラメータ

⚫︎ インデックス:
指定したい要素のインデックスを指定する

eq()メソッドのパラメータにインデックスを指定することで指定した位置の要素を指定することができます。

指定した位置の要素を指定するサンプルコード

eq()で指定した位置の要素を指定するサンプルコードを紹介します。

先頭から指定した位置の要素を指定する場合

先頭から指定した位置の要素を指定する場合はeq()のパラメータにインデックスを正の整数で指定します。

sample.html

style.css

index.js

出力結果

eq()のパラメータにインデックスを正の整数で指定することで先頭から指定した位置の要素を指定することができます。
そのため、btnAクラスのボタンを押すと、先頭の要素の背景色が変更され、btnBクラスのボタンを押すと、末尾の要素の背景色が変更されます。

末尾から指定した位置の要素を指定する場合

eq()で末尾から指定した位置の要素を指定する場合はパラメータにインデックスを負の整数で指定します。

sample.html

style.css

index.js

出力結果

eq()のパラメータにインデックスを負の整数で指定することで末尾から指定した位置の要素を指定することができます。
そのため、btnAクラスのボタンを押すと、末尾の要素の背景色が変更され、btnBクラスのボタンを押すと、先頭の要素の背景色が変更されます。

指定した位置の複数の要素を指定する方法

指定した位置の複数の要素を指定するにはfor文を使用します。

sample.html

style.css

index.js

出力結果

eq()メソッドとfor文を使用することで指定した位置の複数の要素を指定することができます。
そのため、btnAクラスのボタンを押すと、0、1、2番目のp要素の背景色が変更されます。

さとみさん

eq()メソッドとfor文を使用することで、指定した位置の複数の要素を指定することができるんですね!
for文を使わなくてもパラメータに「,(カンマ)」で区切ったりして複数指定することはできないんですか?

ハルトさん

それはできませんね。
もし、仮にパラメータに「,(カンマ)」で区切って指定すると、一番後ろのインデックスのみを指定することになりますので結局単数の要素を指定することになります。

セレクタにeq()を直接指定する場合

eq()メソッドはセレクタに直接指定することができます。

sample.html

style.css

index.js

出力結果

:eq()とeq()メソッドで指定した位置の要素を指定しましたが、eq()メソッドと同じような使い方ができます。

今回のポイント

eq()で要素のイベントを解除

⚫︎ 指定した位置の要素を指定するにはjQueryのeq()メソッドを使用する

⚫︎ eq()メソッドで先頭の指定した位置の要素を指定する場合はeq()メソッドのパラメータに正のインデックスを指定する

⚫︎ eq()メソッドで末尾の指定した位置の要素を指定する場合はeq()メソッドのパラメータに負のインデックスを指定する

⚫︎ eq()メソッドで指定した位置の複数の要素を指定するにはfor文を指定する

⚫︎ セレクタに直接指定する:eq()はeq()メソッドと同じような使い方ができる

関連記事

jQueryのfirst()を使って最初の要素を取得する方法についてはこちらをご参考ください。

jQueryのlast()を使って最後の要素を取得する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し