Jqueryで偶数、奇数要素を指定する

2023年11月21日

Webデザインで、奇数・偶数判断はわりとあります。
例えばテーブルデザインで、偶数行だけ背景に色を付けるなどです。

この場合たいていはCSSで奇数・偶数判断するのですが、たまにJqueryでやることもあります。
CSSとどちらでやるかはケースバイケースですが、今回はJqueryで判断する必要があったため、どのようにやるか調べてみました。

奇数を判断する。

まずは論より証拠。
こちらのサンプルは、Jqueryで奇数行に色を付けています。

ソースはこちらです。

連続するLIタグの偶数個目に対し、Jqueryで色を付けています。

記述方法は要素に対して「:even」をつけるだけです。
上記の例だと以下の記述部分です。

$(“ul li:even”).css(“color”, “#F00”);

Jquery要素指定に:evenを付加すると、奇数要素指定になりました。

ちなみに偶数要素指定の方法

奇数ができるならば、偶数指定も当然あります。
奇数が:evenに対し、偶数は:oddを指定します。

奇数要素指定	:even
偶数要素指定	:odd

偶数要素指定のサンプルはこちらです。

奇数が赤、偶数が青になっています。

Jqueryの指定方法は無数にあります。

Jqueryは何となくプログラム記述に類似していますが、タグありきの指定がほとんどです。
なぜならば、とのタグに対してどのような動作をさせるかがJqueryの本質だからです。

なので、上から3個目といった個別指定も可能です。
今回は、数が無数にあったため、奇数・偶数指定が必要でした。

また本記事がお役に立てば幸いです。