jQuery eq index

jQuery eq() と index() メソッド详解：DOM 要素の正確な選択と操作

この記事では、DOM 要素を操作するための jQuery の 2 つの重要なメソッド、`eq()` と `index()` について詳しく説明します。 `eq()` を使用してインデックスに基づいて単一の要素を選択する方法と、`index()` を使用してコレクション内の要素の位置を取得する方法を学習します。

1. jQuery eq() メソッド：インデックスに基づいて要素を選択する

  • eq() メソッドの用途: 選択した要素の集合から、インデックスに基づいて特定の要素を選択します。
  • 構文とパラメータ: `$(selector).eq(index)`。`index` は要素のインデックス値を表します（0 から始まります）。
  • 例:
    • リストの 2 番目の項目を選択する: `$("li").eq(1)`
    • テーブルの 3 行目を選択する: `$("tr").eq(2)`

2. jQuery index() メソッド：要素のインデックスを取得する

  • index() メソッドの用途: 指定された要素の兄弟要素内でのインデックス位置を返します。
  • 構文とパラメータ:
    • `$(selector).index()`: 要素の兄弟要素に対するインデックスを取得します。
    • `$(selector).index(element)`: 指定された要素 `element` の、セレクタに一致する要素の集合内でのインデックスを取得します。
  • 例:
    • ある `
    • ` 要素の兄弟要素内でのインデックスを取得する: `$("li").click(function(){ $(this).index(); });`
    • 特定の要素 `#targetElement` の、すべての `
      ` 要素内でのインデックスを取得する: `$("div").index($("#targetElement"))`

3. eq() と index() の違いと適用シナリオ

  • 違い:
    • `eq()` は要素を選択するために使用され、`index()` は要素のインデックスを取得するために使用されます。
    • `eq()` はパラメータとしてインデックスを指定する必要がありますが、`index()` はパラメータなしで使用できます。
  • 適用シナリオ:
    • eq(): 特定の位置にある要素のスタイルを変更したり、コンテンツを更新したり、イベントをバインドしたりする必要がある場合に使用します。
    • index(): イベント処理でクリックされた要素を識別するなど、コレクション内の要素の位置を取得する必要がある場合に使用します。

この記事では、`eq()` と `index()` の機能、構文、適用シナリオについて明確に説明し、サンプルコードを使用して理解を深めています。

HTML コード例

<ul>
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

<script>
$(document).ready(function(){
  // 2 番目のリスト項目の背景色を変更する
  $("li").eq(1).css("background-color", "yellow");

  // 各リスト項目をクリックしたときのインデックスを表示する
  $("li").click(function(){
    alert("この項目のインデックスは " + $(this).index() + " です。");
  });
});
</script>

参考資料

Q&A

  1. 質問: `eq()` メソッドを使用して、最後の要素を選択するにはどうすればよいですか?
    回答: `eq(-1)` を使用します。負のインデックスは、要素の集合の末尾からカウントされます。
  2. 質問: `index()` メソッドは、要素が見つからない場合に何を返しますか?
    回答: -1 を返します。
  3. 質問: `eq()` と `:eq()` セレクタの違いは何ですか?
    回答: `eq()` はメソッドであり、`$(selector).eq(index)` のように使用します。`:eq()` はセレクタであり、`$(selector:eq(index))` のように使用します。どちらも同じ結果を生成します。

その他の参考記事:jquery eq 取得