jQuery eq() 方法详解：精准选择元素，附代码示例
jQuery は、Web ページの開発を効率化する JavaScript ライブラリです。その中でも、特定の要素を選択する方法は数多くありますが、今回は要素を順番に選択できる `eq()` メソッドについて解説します。
(一) jQuery eq() 方法基礎
`eq()` メソッドは、選択された要素群の中から、指定したインデックス番号に対応する要素を1つだけ取得するためのメソッドです。
基本構文
$(セレクタ).eq(インデックス番号);パラメータ
| パラメータ | 説明 |
|---|---|
| セレクタ | 要素を選択するための jQuery セレクタ |
| インデックス番号 | 取得したい要素のインデックス番号 (0 から始まります) |
戻り値
指定したインデックス番号に対応する要素を含む新しい jQuery オブジェクトが返されます。
(二) eq() 方法使用示例
サンプルコード 1： リストの2番目の要素を選択
<ul>
<li>リスト項目 1</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
</ul>
<script>
$(function() {
$("li").eq(1).css("color", "red");
});
</script>
このコードでは、`li` 要素の中からインデックス番号 1 (2番目) の要素を選択し、その要素の文字色を赤色に変更します。
サンプルコード 2： テーブルの各行の2番目のセルを選択
<table>
<tr>
<td>セル 1-1</td>
<td>セル 1-2</td>
</tr>
<tr>
<td>セル 2-1</td>
<td>セル 2-2</td>
</tr>
</table>
<script>
$(function() {
$("tr").each(function() {
$(this).find("td").eq(1).css("font-weight", "bold");
});
});
</script>
このコードでは、`tr` 要素 (テーブルの行) をそれぞれ処理し、各行の中で `td` 要素 (テーブルのセル) のうちインデックス番号 1 (2番目) の要素を選択して、その要素のフォントを太字に設定します。
(三) eq() メソッドの利点
- 簡潔なコードで要素を選択できるため、コードの可読性が向上します。
- 他の jQuery のセレクタと組み合わせて、より複雑な条件で要素を選択することができます。
(四) eq() メソッド使用上の注意点
- インデックス番号は 0 から始まるため、注意が必要です。
- 指定したインデックス番号が、要素の範囲を超えている場合は、空の jQuery オブジェクトが返されます。
jQuery eq() 方法に関するQ&A
Q1: eq() メソッドと :nth-child() セレクタの違いは？
A1: eq() メソッドは、jQuery オブジェクト内の要素の順番に基づいて要素を選択します。一方、:nth-child() セレクタは、親要素内の要素の順番に基づいて要素を選択します。
Q2: eq() メソッドで複数の要素を選択することはできますか？
A2: いいえ、eq() メソッドは、指定したインデックス番号に対応する要素を1つだけ選択します。複数の要素を選択したい場合は、`slice()` メソッドなどを利用します。
Q3: eq() メソッドで選択した要素にクラスを追加するには？
A3: `addClass()` メソッドを使用します。例えば、`$("li").eq(1).addClass("active");` のように記述することで、2番目のリスト項目に "active" クラスを追加することができます。