Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

btmup Blog

JavaScript・jQuery

jQuery で奇数番目・偶数番目を指定するときの注意点。

投稿日:

ちょっとはまったのでメモ。
リストやテーブルに対して、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 を使ってそこまでバリバリ組むこともあまり無いと思うので、もうちょっと分かりやすかったら良いなぁ、なんてことを思ったりもしました。
(まぁ結局は使う側が覚えとくしか無いんですけどね)




-JavaScript・jQuery
-, , , ,

Copyright© btmup Blog , 2024 All Rights Reserved Powered by AFFINGER5.