jQuery 基本フィルタ（5）「:eq(index)」、「:gt(index)」、「:lt(index)」フィルタ

選択された要素の通し位置を指定することができます。

たとえば、$(“div:eq(3)”) とした場合、div要素のなかで4番目の要素が選択されます。
また、$(“div:gt(3)”) とした場合は、div要素の中で4番目より後の要素すべてが選択されます。
また、$(“div:lt(3)”) とした場合は、div要素の中で4番目より前の要素すべてが選択されます。

以下にサンプルを示します。

<title>基本フィルタ</title>



$(function(){
        // 4番目のpタグにオレンジのボーダーを設定
        $("p:eq(3)").css("border", "solid 3px orange");

        // 5番目より後のpタグにグレイのボーダーを設定
        $("p:gt(4)").css("border", "solid 3px gray");

        // 3番目より前のpタグに白のボーダーを設定
        $("p:lt(2)").css("border", "solid 3px white");
});



<h3>japan</h3>
<div id="first">
<p>zack japan</p>
<p>kamo japan</p>
<p>torushie japan</p>
</div>
<h3>fruit</h3>
<div id="second">
<p>orange</p>
<p>lemon</p>
<p>apple</p>
<p>peach</p>
</div>
<h3>animal</h3>
<div id="third">
<p>lion</p>
<p>puma</p>
</div>

<title>基本フィルタ</title>

$(function(){

// 4番目のpタグにオレンジのボーダーを設定

$("p:eq(3)").css("border", "solid 3px orange");

// 5番目より後のpタグにグレイのボーダーを設定

$("p:gt(4)").css("border", "solid 3px gray");

// 3番目より前のpタグに白のボーダーを設定

$("p:lt(2)").css("border", "solid 3px white");

});

<h3>japan</h3>

<p>zack japan</p>

<p>kamo japan</p>

<p>torushie japan</p>

</div>

<h3>fruit</h3>

<p>orange</p>

<p>lemon</p>

<p>apple</p>

<p>peach</p>

</div>

<h3>animal</h3>

</div>

ここでは順番に以下のことを行っています。
・pタグのなかで4番目の要素に緑のボーダーを設定してます。
・pタグのなかで5番目のより後の要素にオレンジのボーダーを設定してます。
・pタグのなかで3番目のより前の要素に白のボーダーを設定してます。

$("p:eq(3)").css("border", "solid 3px orange");
$("p:gt(4)").css("border", "solid 3px gray");
$("p:lt(2)").css("border", "solid 3px white");

$("p:eq(3)").css("border", "solid 3px orange");

$("p:gt(4)").css("border", "solid 3px gray");

$("p:lt(2)").css("border", "solid 3px white");