ちょっとはまったのでメモ。
リストやテーブルに対して、jQuery で奇数番目・偶数番目の要素を指定するときの注意点です。
例えば、以下のような HTML があるとします。
<ul id="list">
<li>要素01</li>
<li>要素02</li>
<li>要素03</li>
<li>要素04</li>
<li>要素05</li>
</ul>で、奇数番目の li 要素の文字色を赤に、偶数番目の li 要素の文字色を青に変更したいと思います。
正しく実行されれば、要素01・要素03・要素05が赤文字、要素02・要素04が青文字になるはずですね。
ところが、使用する方法（セレクタ）によっては、期待したのとは逆の結果になることがあります。
「:odd」、「:even」で指定する場合
最も単純そうな方法としては、以下のようなものがあります。
対象となる要素に「:odd」もしくは「:even」を指定するだけで、それぞれ奇数と偶数を選択できます。便利ですね。
それを使用したスクリプトの例が以下。
$('#list li:odd').css('color','red');
$('#list li:even').css('color','blue');ところが、この方法では奇数と偶数が逆になって（いるように見えて）しまいます。
その理由は、この指定方法で取得する番号は 0 番目から始まるため。
つまり、見た目の最初の要素は「偶数」扱いとなり、後は 1 つずつズレているワケですね。
「:nth-child」で指定する場合
ではどうすれば良いかというと、「:nth-child」を使用します。
「:nth-child」は、その名の通り「n 番目」の子要素を指定するためのセレクタ（擬似クラス）ですが、それだけではなく、「n 個おき」や、「奇数・偶数」も指定することができます。
そして、この方法であれば 1 から始まる番号を取得するので、ここで期待している結果が得られるということです。
このセレクタで奇数と偶数を指定するには、以下のように書きます。
$('#list li:nth-child(odd)').css('color','red');
$('#list li:nth-child(even)').css('color','blue');で、その実行結果。
ちゃんと文字色が変更されていることが確認できました。
ちなみに、例えば「3 個おき」という指定をしたい場合、「:nth-child(3n)」とすれば良いみたいです。
まとめ・雑感
プログラム的な処理をしたり、配列を使用したりする場合は、0 番目から始まってくれないと都合が悪かったりするんでしょうね。
でも、jQuery を使ってそこまでバリバリ組むこともあまり無いと思うので、もうちょっと分かりやすかったら良いなぁ、なんてことを思ったりもしました。
（まぁ結局は使う側が覚えとくしか無いんですけどね）