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

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

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

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







$(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");
});



japan

zack japan

kamo japan

torushie japan

fruit

orange

lemon

apple

peach

animal

lion

puma

ここでは順番に以下のことを行っています。
・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");

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>