jQueryの「eq」はなんの略ですか？
jQueryにおいて、要素の順番を選択する際に便利な「:eq()」セレクタ。 この「eq」は一体何の略称なのでしょうか？
「eq」は「Equal」の略
結論から言うと、「eq」は「**Equal**」の略です。 jQueryのセレクタにおける「:eq(n)」は、**要素のインデックス番号が「n」と等しいもの**を選択します。 インデックス番号は0から始まることに注意が必要です。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>
上記のHTMLにおいて、「$("li:eq(1)")」と記述すると、「みかん」の要素が選択されます。
関連するセレクタ
「:eq(n)」以外にも、要素の順番を選択するセレクタはいくつか存在します。 代表的なものを表にまとめました。
| セレクタ | 意味 |
|---|---|
| :eq(n) | インデックス番号がnと等しい要素を選択 |
| :gt(n) | インデックス番号がnより大きい要素を選択 (**G**reater **T**han) |
| :lt(n) | インデックス番号がnより小さい要素を選択 (**L**ess **T**han) |
使用例
これらのセレクタを使用することで、特定の順番の要素だけに対してCSSを適用したり、イベント処理を追加したりすることができます。
<script>
$(function() {
// 偶数番目のリストアイテムの背景色を変更
$("li:even").css("background-color", "#f2f2f2");
// 3番目より後ろのリストアイテムにクラスを追加
$("li:gt(2)").addClass("highlight");
});
</script>
参考資料
* jQuery API Documentation - :eq() Selectorよくある質問
Q1. :eq() と eq() メソッドの違いは何ですか？
A1. :eq() はセレクタなので、要素の絞り込みに利用します。eq() メソッドはjQueryオブジェクトのメソッドで、指定したインデックス番号の要素を含む新しいjQueryオブジェクトを返します。
Q2. インデックス番号は1から始まりますか？
A2. いいえ、インデックス番号は0から始まります。そのため、最初の要素は :eq(0) で選択できます。
Q3. 負のインデックス番号を指定できますか？
A3. はい、負のインデックス番号を指定できます。-1は最後の要素、-2は最後から2番目の要素を指します。
その他の参考記事:jquery 時間 指定