btmup Blog

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

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

執筆者:


comment

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

関連記事

no image

IE6、IE7 で「識別子、文字列または数がありません」というスクリプトエラーが発生する。

最近 jQuery を使うことが多く、それに伴ってデバッグ作業が増えてきました。 その中でもちょくちょく目にするのが「識別子、文字列または数がありません」というエラー。 主に IE6、IE7 で発生し …

no image

リンクしているパスから JavaScript(jQuery)でファイル名を抽出する方法。

PHP には「basename()」や「dirname()」という便利な関数があり、それぞれファイル名とディレクトリ名を、指定したパスから抽出することができます。 しかし、JavaScript にそん …

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …

no image

JSライブラリ「jQuery」と「prototype.js」の特徴。

数あるJavascriptライブラリの中で代表的な「jQuery」と「prototype.js」。 今までは何らかの機能が必要になった際にググったり本で調べたりして、見付けたものをベースに何とか形にし …

no image

jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。

最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。 自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。 僕自身も医療系のサイトに関わることが多いのですが、 …