.eq()

http://api.jquery.com/eq/

現在マッチしている要素をインデックス番号でフィルタリングします。

.eq( index ) 1.1.2追加
.eq( -index ) 1.4追加
サンプル
デモ

.eq( index ) 1.1.2追加

戻り値:jQuery

現在マッチしている要素をインデックス番号でフィルタリングします。

引数	説明
index	0から始まるインデックス番号を指定します。

.eq( -index ) 1.4追加

戻り値:jQuery

現在マッチしている要素をインデックス番号でフィルタリングします。

引数	説明
-index	マイナスのインデックス番号を指定できます。-1で一番最後の要素にマッチします。

サンプル

例えば、下記のようなコードがあった場合、

<ul>
   <li>リスト項目1</li>
   <li>リスト項目2</li>
   <li>リスト項目3</li>
   <li>リスト項目4</li>
   <li>リスト項目5</li>
</ul>

次の処理を実行すると、リスト項目3の背景が赤くなります。

$('li').eq(2).css('background-color', 'red');

また、次のようにマイナスの値を与えることも可能です。 -2を指定すると、リスト項目4が選択されます。

$('li').eq(-2).css('background-color', 'red');

存在しないインデックス番号を指定した場合は、lengthが0の空のjQueryオブジェクトが返ります。

 $('li').eq(5).css('background-color', 'red');

デモ

インデックス番号2のDIVを選択し、blueクラスを割り当てています。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:60px; height:60px; margin:10px; float:left;
        border:2px solid blue; }
  .blue { background:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<script>
    $("body").find("div").eq(2).addClass("blue");
</script>
</body>
</html>