jQuery逆引きリファレンス
要素セットからn番目の要素を取得するには？（eq）
jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。
eqメソッドを利用することで、現在の要素セットから指定されたインデックス番号に対応する要素だけを取り出せます。インデックス番号は、一般的な配列と同じくゼロスタートです。
具体的な例も見てみましょう。以下は、全ての<div>要素に対して枠線を設定した後、3番目（インデックス番号2）の<div>要素にだけ水色の背景色を適用した例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
.box {
height:30px;
width:30px;
float:left;
margin-left:20px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(function() {
$('div').
css('border', 'solid 1px'). // 枠線を設定
eq(2). // 3番目の要素に絞り込み
css('background-color', '#0ff'); // 背景色を設定
});
</script>
</body>
</html>
|
eqメソッドには、負数を指定することもできます。その場合、末尾の要素のインデックスを-1として数えます。以下は、上のリストを、負数を使って書き換えた例です。
|
$(function() {
$('div').
css('border', 'solid 1px').
eq(-3).
css('background-color', 'Yellow');
});
|
果たして、後方から3番目の<div>要素――つまり、前から3番目の<div>要素に背景色が付くことが確認できます。
API：.eq() カテゴリ：Traversing（トラバーシング） > Filtering（フィルタリング）
※以下では、本稿の前後を合わせて5回分（第74回～第78回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
74. 要素セットから指定の条件に合致したものを取り除くには？（not）
jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。
75. 現在の要素セットからm～n番目の要素を取得するには？（slice）
jQueryオブジェクトで保持している要素セットから、指定したm～n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。
76. 【現在、表示中】≫ 要素セットからn番目の要素を取得するには？（eq）
jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。
77. 要素セットから特定の子要素を持つ要素だけを取得するには？（has）
jQueryオブジェクトで保持している要素セットから、特定の子要素を持つ要素のみを取得できるhasメソッドの基本的な使い方を説明する。
78. 要素セットに、指定された条件に合致する要素が含まれるかを判定するには？（is）
isメソッドを使って、指定した条件に合致する要素が、現在の要素セットに1つ以上含まれているかどうかを判定する方法を説明。また、jQuery 1.7前後で発生した挙動の変化についても言及する。
