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

yuga.js で、別ウィンドウで開かないドメインを追加する方法。

「yuga.js」という jQuery プラグインが便利すぎて、最近ではほとんどデフォルトで使わせていただいています。 中でも重宝しているのが、「外部リンクの場合は別ウィンドウで開く」という機能。 余 …

no image

ActionScript 3.0 で Javascript を呼び出してウィンドウを閉じる方法。

ググっても情報がなぜか少ないので、とりあえずメモ的にアップ。 window.open() なんかで開いたサブウィンドウを、テキストリンクやボタンで閉じるための方法です。 HTML でウィンドウを閉じる …

no image

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

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

no image

yuga.js で、外部リンクを別ウィンドウで開く機能を area 要素にも適用する方法。

小ネタです。 JavaScript が分かる人なら何の造作もないことなんですけど、分からなくて困ってる人が居るかも知れないので一応メモ。

no image

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

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