jQuery逆引きリファレンス
登場順序によって取得すべき要素を絞り込むには？ ― 基本フィルター
jQueryの$()関数でフィルター構文を使い、先頭／末尾の要素や、偶数／奇数番目の要素、n番目／n番目より前や後の要素を取り出す方法を説明する。
別稿「TIPS：id値／タグ名／クラス名で特定の要素を取り出すには？」では、基本セレクターを利用した要素の検索について解説しました。本稿では、引き続きフィルター構文を利用して、取得した要素セットを、特定の条件で絞り込む方法について解説します。フィルターは、これまでに紹介したセレクターの末尾に:フィルターの形式で付与します。
1先頭／末尾の要素を取得する
:first／:lastフィルターを利用することで、取得した要素セットから先頭／末尾の要素だけを取り出せます。
例えば以下は、選択ボックスの選択肢（<option>要素）から先頭／末尾のものだけを取り出し、背景色を付与する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<select name="book">
<option value="">--＜書籍を選択してください＞--</option>
<option value="docker">プログラマのためのDocker教科書</option>
<option value="js">JavaScript逆引きレシピ</option>
<option value="android">アプリを作ろう！ Android入門</option>
<option value="jq">10日でおぼえるjQuery入門教室 第2版</option>
<option value="ecma">速習 ECMAScript 6</option>
</select>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('option:first').css('background-color', 'Yellow');
$('option:last').css('background-color', 'Lime');
});
</script>
</body>
</html>
|
2偶数／奇数番目の要素を取得する
:even／:oddフィルターを利用することで、取り出した要素セット内の偶数／奇数番目の要素を取り出せます。
例えば以下は、選択ボックスの選択肢（<option>要素）から偶数／奇数番目のものだけを取り出し、背景色を付与する例です。
|
$(function() {
$('option:even').css('background-color', 'Yellow');
$('option:odd').css('background-color', 'Lime');
});
|
ただし、要素の順序は、先頭を0番目と数える点に注意してください。よって、先頭は偶数番目なので、背景色も黄色になります。
3n番目の要素を取得する
:eq(index)フィルターを利用することで、index番目の要素を取り出せます。先ほどと同じく、先頭要素は0番目と数える点に注意してください。
例えば以下は3番目の選択肢（<option>要素）だけに背景色を付与する例です。
|
$(function() {
$('option:eq(2)').css('background-color', 'Yellow');
});
|
ちなみに、後方からn番目の要素を取り出したいならば、eqフィルターに負数を渡します。この場合、末尾の要素を-1番目とします。
以下であれば、末尾から2番目の要素に背景色を付与します。
|
$(function() {
$('option:eq(-2)').css('background-color', 'Yellow');
});
|
4n番目の要素よりも前方／後方の要素を取得する
:lt(index)／:gt(index)フィルターを利用することで、それぞれindex番目よりも前方／後方の要素を取得できます。ltはless than（より小さい）、gtはgreater than（より大きい）の略です。
例えば以下は、3番目の<option>要素を境として、その前後の要素にそれぞれ異なる背景色を付与します。
|
$(function() {
$('option:lt(2)').css('background-color', 'Yellow');
$('option:gt(2)').css('background-color', 'Lime');
});
|
API：jQuery()｜$() カテゴリ：Core（コア）
処理対象：基本フィルター カテゴリ：セレクター
API：:firstフィルター｜:lastフィルター｜:oddフィルター｜:evenフィルター｜:eq()フィルター｜:lt()フィルター｜:gt()フィルター カテゴリ：Selectors（セレクター） > Basic Filter（基本フィルター）
※以下では、本稿の前後を合わせて5回分（第37回～第41回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
37. 属性値で目的の要素を絞り込むには？ ― 属性フィルター
jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致／部分一致／複数一致などが指定できる。
38. 親子／兄弟関係にある要素を取り出すには？ ― 階層セレクター
jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素／子孫要素／直後の要素／以降の要素などを絞り込んで取り出す方法を説明する。
39. 【現在、表示中】≫ 登場順序によって取得すべき要素を絞り込むには？ ― 基本フィルター
jQueryの$()関数でフィルター構文を使い、先頭／末尾の要素や、偶数／奇数番目の要素、n番目／n番目より前や後の要素を取り出す方法を説明する。
40. 子要素／テキストによって取得すべき要素を絞り込むには？ ― コンテンツフィルター
:parent／:empty／:contains()／:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素／空の要素／特定のテキストを含む要素／指定されたセレクターに合致する子要素を持つ要素を取得できる。
41. 子要素の位置関係によって取得すべき要素を絞り込むには？ ― 子要素フィルター
:first-child／:last-childフィルターにより先頭／末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child／:nth-last-childフィルターにより先頭／末尾からn個おきに子要素を取得する方法を解説。
