jQuery 基本フィルタ（4） 「:even」、「:odd」タグ

選択されている要素の中から、偶数番目の要素、または、奇数番目要素を抽出します。

たとえば、$(“div:odd”) とした場合、div要素の中で奇数番目のものだけが選択されます。

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

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



$(function(){
        // 偶数番目のpタグの背景をorangeに
        $("div p:even").css("background","orange");

        // 奇数番目のpタグの背景をピンクに
        $("div p:odd").css("background","pink");
});



<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(){

// 偶数番目のpタグの背景をorangeに

$("div p:even").css("background","orange");

// 奇数番目のpタグの背景をピンクに

$("div p:odd").css("background","pink");

});

<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>

ここでは、divタグ配下にあるpタグの中で偶数番目の要素の背景をオレンジに、
divタグの配下にあるpタグの中で奇数番目の要素の背景をピンクにしています。

$("div p:even").css("background","orange");
$("div p:odd").css("background","pink");

1 2	$("div p:even").css("background","orange"); $("div p:odd").css("background","pink");