.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>
© 2010 - 2017 STUDIO KINGDOM