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要素が青色になり、それより前の要素は赤色、後の要素は緑色になります。
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。