【jQuery】.eq()メソッドで特定の要素を簡単に選択する方法

要素を:nth-child()を選択するように、しかし動的に選択したい場合があるかと思います。そういう場合はjQueryの.eq()メソッドを使うのがおすすめです。
.eq()メソッドはjQueryオブジェクトが保持している要素のリストから、指定したインデックスにある要素だけを選択するために使用されます。このメソッドは非常に便利で、特定の要素を簡単に選択して操作したい場合によく使われます。

jQueryとは？

jQueryとは、JavaScriptをより簡単に扱えるように設計された軽量なJavaScriptライブラリです。DOM操作、イベント処理、アニメーション、Ajax呼び出しなど、Web開発における一般的なタスクを簡潔な構文で実行できるようにします。2006年に公開されて以来、その使いやすさから多くのWeb開発者に広く採用されてきました。jQueryを使うことで、ブラウザ間の差異を抽象化し、異なるブラウザでも一貫したJavaScriptコードの動作を保証することができます。コードの記述量が減少し、開発プロセスが加速するため、初心者から上級者まで幅広い開発者に支持されています。

jQueryライブラリの読み込み方法についてはこちらの記事をご覧ください。

基本的な使用法

.eq(index)メソッドは、引数として整数のインデックスを受け取ります。このインデックスは、0から始まる数値で、選択したい要素の位置を指定します。負の数値を指定すると、リストの末尾からの位置を指定したことになります（例えば、-1は最後の要素を選択します）。

例えば、以下のHTMLがあるとします。

<ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

このリストから2番目のアイテム（アイテム2）を選択したい場合、以下のように.eq()メソッドを使用できます。

$('li').eq(1).css('color', 'red');

このコードは、<li>要素のリストからインデックス1にある要素（アイテム2）を選択し、そのテキストの色を赤に変更します。

実例

.eq()メソッドは、特に複数の要素が同じクラスを持っている場合や、ドキュメントの特定の部分から特定の要素を選び出したい場合に有用です。例えば、複数のスライドやタブがある場面で、ユーザーの操作に応じて特定のスライドやタブの内容を表示/非表示にするときなどに便利です。
※今回は.eq()の解説そのものがメインなので、デモはありません。

タブ

あるWebサイトにタブになっている画像ギャラリーがあり、ユーザーがタブ（button）をクリックすると対応する画像が表示されるようにしたいとします。画像は順番に並んでいると仮定し、ボタンのクリックによってその順番に基づいて正しい画像を表示させます。

<div class="nav-buttons">
    <button>1</button>
    <button>2</button>
    <button>3</button>
</div>
<div class="images">
    <img src="image1.jpg" style="display:none;" alt="image1">
    <img src="image2.jpg" style="display:none;" alt="image2">
    <img src="image3.jpg" style="display:none;" alt="image3">
</div>

このギャラリーで.eq()を使って特定の画像を表示するjQueryのコードは以下の通りです。

$('.nav-buttons button').click(function() {
    var index = $(this).index();
    $('.images img').hide().eq(index).show();
});

このコードでは、ナビゲーションボタンがクリックされると、そのボタンのインデックスに基づいて対応する画像を表示します。まず、全ての画像を非表示にし、次に.eq(index)で選択した画像だけを表示します。

アコーディオンメニュー

Webページにアコーディオンメニューがあり、ユーザーがメニュータイトルをクリックすると、そのタイトルに対応する詳細情報が展開するようにします。メニューと詳細は順番に対応しているとします。

<div class="accordion-menu">
    <div class="menu-title">メニュー1</div>
    <div class="menu-content" style="display:none;">内容1</div>
    <div class="menu-title">メニュー2</div>
    <div class="menu-content" style="display:none;">内容2</div>
</div>

メニュータイトルがクリックされた時に、対応するコンテンツを展開するjQueryのコードは以下のようになります。

$('.menu-title').click(function() {
    // すべてのコンテンツを非表示にする
    $('.menu-content').hide();
    // クリックされたタイトルのインデックスを取得
    var index = $(this).index() / 2; // タイトルとコンテンツが交互にあるため
    // 対応するコンテンツを表示する
    $('.menu-content').eq(index).slideDown();
});

この例では、.index()メソッドでクリックされたメニュータイトルのインデックスを取得していますが、タイトルとコンテンツが交互に配置されているため、得られるインデックスを2で割る必要があります。その後、.eq(index)を使って対応するコンテンツを選択し、.slideDown()メソッドでアニメーション付きで表示します。

まとめ

jQueryの.eq()メソッドは、複数の要素の中から特定のものを選択して操作する際に非常に便利です。上記の実例では、ナビゲーションボタンやアコーディオンメニューといった、ユーザーイ操作に伴う機能を実装する際に、.eq()メソッドがどのように役立つかをご紹介しました。このメソッドを利用することで、コードの可読性を保ちつつ、効率的に要素を操作することが可能になります。