【jQuery】eq()で要素の順番を指定して選択する方法｜:eq()セレクタ・first・last比較まで

jQueryの eq() メソッドは、選択した要素群の中からインデックス番号で特定の要素を1つ選択します。リストのN番目・タブの特定パネルを操作するなど、インデックスベースの要素選択が必要な場面で活躍します。

1. eq()の基本構文

インデックスは 0始まりです。最初の要素が0、2番目が1、となります。

// 基本構文
$('li').eq(0)   // 1番目（先頭）
$('li').eq(1)   // 2番目
$('li').eq(2)   // 3番目
$('li').eq(-1)  // 最後の要素（末尾から1番目）
$('li').eq(-2)  // 末尾から2番目

// 実際の使用例
$('li').eq(0).addClass('first');   // 最初のliにクラス追加
$('li').eq(-1).addClass('last');   // 最後のliにクラス追加
$('li').eq(2).css('color', 'red'); // 3番目のliに色付け

2. 負のインデックスで末尾から選択

jQuery 1.4以降、eq() に負の値を渡すと末尾から数えた要素を返します。

<ul class="item-list">
  <li>アイテム1</li>  <!-- eq(0) / eq(-5) -->
  <li>アイテム2</li>  <!-- eq(1) / eq(-4) -->
  <li>アイテム3</li>  <!-- eq(2) / eq(-3) -->
  <li>アイテム4</li>  <!-- eq(3) / eq(-2) -->
  <li>アイテム5</li>  <!-- eq(4) / eq(-1) -->
</ul>

$('.item-list li').eq(0).text();   // 'アイテム1'
$('.item-list li').eq(-1).text();  // 'アイテム5'
$('.item-list li').eq(-2).text();  // 'アイテム4'

3. :eq()セレクタとの比較

:eq(n) セレクタでも同様の選択ができますが、メソッド形式の .eq() が推奨されます。

// セレクタ形式（古い書き方）
$('li:eq(2)').addClass('third');

// メソッド形式（推奨）
$('li').eq(2).addClass('third');

// パフォーマンス: メソッド形式がやや速い
// セレクタ形式はjQuery独自拡張でCSS標準ではないため

4. first()・last()・slice()との使い分け

var $li = $('ul li');

$li.eq(0)          // 0番目（1つだけ）= first() と同じ
$li.first()        // 最初の要素
$li.last()         // 最後の要素
$li.eq(-1)         // 最後の要素 = last() と同じ

// slice(start, end): 範囲選択
$li.slice(0, 3)    // 0〜2番目（3番目は含まない）
$li.slice(2)       // 2番目以降すべて

5. 実用例：タブ切り替えでeq()を活用

タブのインデックスとパネルのインデックスを揃えることで、eq() による対応付けが簡潔になります。

<div class="tab-wrapper">
  <ul class="tab-list">
    <li class="tab-btn active">タブ1</li>
    <li class="tab-btn">タブ2</li>
    <li class="tab-btn">タブ3</li>
  </ul>
  <div class="tab-panel active">パネル1のコンテンツ</div>
  <div class="tab-panel">パネル2のコンテンツ</div>
  <div class="tab-panel">パネル3のコンテンツ</div>
</div>

$(function () {
  $('.tab-btn').on('click', function () {
    var idx = $(this).index();  // クリックしたタブのインデックスを取得

    // タブボタンのアクティブ切り替え
    $('.tab-btn').removeClass('active');
    $(this).addClass('active');

    // 対応するパネルをeq()で指定して表示
    $('.tab-panel').hide();
    $('.tab-panel').eq(idx).show();
  });
});

まとめ

jQueryの eq() はインデックスで特定要素を選択するメソッドです。0始まりで負の値は末尾からカウントします。first()・last() は eq() の糖衣構文で、範囲選択は slice() を使います。タブUIのパネル対応付けなど、インデックスを活用した実装に重宝します。

関連記事: jQueryのeach()を使ったループ処理 / jQueryの.lengthプロパティで要素数をカウントする方法

よくある質問（FAQ）