jQueryのセレクター１ odd/even/first/lastセレクター

CSSの箇所でselectorを取り上げましたが、
jQuery独自のセレクターがあるので
何回かに分けて紹介します。

odd/evenセレクター

セレクターの中から奇数番目に出てくる要素をoddセレクター
偶数番目に出てくる要素をevenセレクターで指定します。

注意しなければいけないのが、javaScriptでは、
数字は「０」から数えます。
最初の要素は「１」ではなく「０」です。

ロシアの都市のリストを書いていて、
偶数番目のリストではピンク、
奇数番目のリストでは黄色を背景に指定しています。

CSSで、nth-child擬似クラスというものがありますが、
これとの違いはnth-child擬似クラスが共通の親要素を持つ
要素から奇数または偶数番目の要素を選ぶのに対して、
even/oddセレクターは指定したセレクターから偶数または
奇数番目に出てくる要素を選択できる点に違いがあります。

first/lastセレクター

セレクターの中から初めの要素をfirstセレクター、
最後の要素をlastセレクターで指定できます。

サンプルコードを見て、実行するとわかるますが、
日本の都市の一覧が表示されます。
そして一番最初の都市の「1.東京」が赤くなり
最後の都市の「2.鹿児島」が水色になっています。

CSSで、first-child擬似クラスとlast-child擬似クラスが
あり違いが分かりにくいと思います。

first-child/last-child擬似クラスが共通の親要素を持つ要素から
最初または最後の要素を選ぶのに対して、

first/lastセレクターは指定したセレクターで
最初または最後に登場する要素だけを選択できます。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>

    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        margin:0 auto;}
    ul{
        list-style-type:decimal;
        margin-left:24px;
        font-size:16px;
        background-color:#f0f0f0;
        font-family:"メイリオ";}
    </style>    
    
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">
<ul class="japan">
    <li>東京</li>
    <li>横浜</li>
    <li>大阪</li>
    <li>名古屋</li>
    <li>博多</li>
    <li>千葉</li>
    <li>広島</li>
    <li>仙台</li>
    <li>札幌</li>
    <li>鹿児島</li>
</ul>

<ul class="russia">
    <li>モスクワ</li>
    <li>サンクトペルブルグ</li>
    <li>ニジニ・ノブゴロド</li>
    <li>エカテリンブルグ</li>
    <li>ノボシビスク</li>
    <li>カザン</li>
    <li>イルクーツク</li>
    <li>ハバロフスク</li>
    <li>ユジノサハリンスク</li>
    <li>ウラジオストック</li>
</ul>

</div><!--contatiner-->

<script>
$(document).ready(function(){
    //first/lastセレクター
    $(".japan li:first").css("color","red");
    $(".japan li:last").css("color","aqua");

    //odd/evenセレクター
    $(".russia li:odd").css("background-color","yellow");
    $(".russia li:even").css("background-color","pink");
});

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

margin:0 auto;}

ul{

list-style-type:decimal;

margin-left:24px;

font-size:16px;

background-color:#f0f0f0;

font-family:"メイリオ";}

</style>

</head>

<body>

</ul>

<li>サンクトペルブルグ</li>

<li>ニジニ・ノブゴロド</li>

<li>エカテリンブルグ</li>

<li>ノボシビスク</li>

<li>イルクーツク</li>

<li>ハバロフスク</li>

<li>ユジノサハリンスク</li>

<li>ウラジオストック</li>

</ul>

</div>

$(document).ready(function(){

//first/lastセレクター

$(".japan li:first").css("color","red");

$(".japan li:last").css("color","aqua");

//odd/evenセレクター

$(".russia li:odd").css("background-color","yellow");

$(".russia li:even").css("background-color","pink");

});

</script>

</body>

</html>