jQuery eq() メソッド

jQuery eq() メソッド：ページ要素を正確に選択する

jQuery の eq() メソッドを使用すると、インデックス値に基づいて、DOM 要素のグループから特定の要素を選択できます。

eq() メソッドの構文

$(selector).eq(index)

  • selector: 要素のグループを選択するための有効なセレクター
  • index: 選択する要素のインデックス値（0 から開始）

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

<script>
$(document).ready(function(){
  $("li").eq(1).css("color", "red"); // 2番目のリスト項目を赤色に設定
});
</script>

eq() メソッドの適用シナリオ

  • リスト、テーブル、または他のコレクション要素から特定の項目を選択する
  • ループと組み合わせて、要素のグループを反復処理し、操作する
  • ユーザーインタラクションに基づいて特定の要素を選択する

例：


// リストから3番目の項目を選択する
$("li").eq(2).css("font-weight", "bold");

// テーブルの偶数行にスタイルを追加する
$("tr:even").addClass("even-row");

// ユーザーがボタンをクリックしたときに、対応するインデックスの画像を取得する
$("button").click(function(){
  var index = $(this).index();
  var imgSrc = $("img").eq(index).attr("src");
  // imgSrc を使用して画像を表示する
});

eq() メソッドと他のセレクターメソッドの比較

メソッド 説明
eq() インデックスに基づいて要素を選択する
:eq() セレクター eq() メソッドと同じ機能を提供する
get() 指定されたインデックスの DOM 要素を返す
first() 最初の要素を選択する
last() 最後の要素を選択する

例：


// eq() メソッドを使用して2番目のリスト項目を選択する
$("li").eq(1).css("color", "blue");

// :eq() セレクターを使用して2番目のリスト項目を選択する
$("li:eq(1)").css("color", "blue");

// get() メソッドを使用して2番目のリスト項目の DOM 要素を取得する
var secondListItem = $("li").get(1);

注意事項

  • インデックス値は 0 から始まります。
  • インデックス値が範囲外の場合、eq() メソッドは空の jQuery オブジェクトを返します。
  • コードの効率と可読性を向上させるために、他の jQuery メソッドと組み合わせて使用することをお勧めします。

例：


// インデックス値が範囲外の場合
$("li").eq(10).css("color", "red"); // 何も起こらない

まとめ

jQuery の eq() メソッドは、特定のインデックスの要素を選択するためのシンプルかつ効果的な方法を提供します。 eq() メソッドを柔軟に使用することで、Web ページ上のさまざまな要素を簡単に操作および制御できます。

関連する質問と回答

  1. 質問： eq() メソッドと :eq() セレクターの違いは何ですか？
    回答： eq() メソッドと :eq() セレクターはどちらも同じ機能を提供します。 eq() メソッドはメソッドであり、:eq() はセレクターです。
  2. 質問： eq() メソッドを使用して複数の要素を選択できますか？
    回答： いいえ、eq() メソッドは一度に1つの要素のみを選択します。 複数の要素を選択するには、他の jQuery メソッドと組み合わせて使用​​する必要があります。
  3. 質問： eq() メソッドはどのような場合に役立ちますか？
    回答： eq() メソッドは、リスト、テーブル、または他のコレクション要素から特定の項目を選択する場合、ループと組み合わせて要素のグループを反復処理する場合、ユーザーインタラクションに基づいて特定の要素を選択する場合などに役立ちます。