Web制作の現場で使えるjQuery　UIデザイン入門 ― 第4回

初めてのjQuery：セレクターAPIを一挙解説（後編） (3/5)

5．jQueryの独自フィルター

　jQueryではCSSセレクター以外にも、独自のセレクターである「フィルター」が利用できます。

■firstフィルター / lastフィルター

　セレクターの中から最初の要素を「firstフィルター」、最後の要素を「lastフィルター」として指定できます。

▼サンプルコード（HTML部分）

<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li:first").css("color","red");
    $("li:last").css("color","red");
})

▼実行結果（実際のWebページ）

　firstフィルターで1行目のli要素が、lastフィルターで最後のli要素が赤色になります。

　first-childセレクターやlast-childセレクターとの違いが分かりにくいですが、first-child／last-childセレクターが共通の親要素を持つ要素から最初（または最後）の要素を選択するのに対して、last／firstフィルターは指定したセレクターで最初（最後）に登場する要素を指定できます。

■evenフィルター / oddフィルター

　セレクターの中から偶数番目に出現する要素を「evenフィルター」で、奇数番目に出現する要素を「oddフィルター」で指定できます。

▼サンプルコード（HTML部分）

<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li:odd").css("color","red");
    $("li:even").css("color","blue");
})

▼実行結果（実際のWebページ）

　奇数行目のli要素は赤色に、偶数行目のli要素は青色になります。

　nth-child擬似クラスの $("li:nth-child(even)") や $("li:nth-child(odd)") との違いは、nth-child擬似クラスが共通の親要素を持つ要素から奇数（または偶数）の要素を選択するのに対して、odd／evenフィルターは指定したセレクターで奇数（偶数）に登場する要素を指定できます。

■eqフィルター / gtフィルター / ltフィルター

　セレクターの中から特定の要素を「eqフィルター」（equal）で、特定の要素より前の要素を「ltフィルター」（less than）で、後の要素を「gtフィルター」（greater than）で指定できます。要素の指定は、登場する順番を数値で指定します。JavaScriptは0から数値を数えるため、1番目の要素の場合は0、2番目は1、3番目は2……といった具合に実際の順番から1を引いた数を指定します。

▼サンプルコード（HTML部分）

<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li:lt(2)").css("color","red");
    $("li:eq(2)").css("color","blue");
    $("li:gt(2)").css("color","green");
})

▼実行結果（実際のWebページ）

　2に1を足した順番（3行目）のli要素が青色になり、それより前の要素は赤色、後の要素は緑色になります。