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

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

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

奇数を判断する。

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

ソースはこちらです。

<!doctype html><html><head><metacharset="shift_jis"><title></title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>
$(document).ready(function()
{
	$("ul li:even").css("color", "#F00");
});
</script></head><body><p>
奇数は赤色
</p><ul><li></li><li></li><li></li><li></li></ul></body></html>Code language:HTML, XML(xml)

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

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

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

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

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

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

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

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

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

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

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

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

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

今回のレポートは以上です。
読んでいただいてありがとうございました。

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
ホームページのご提案もさせていただいております

備忘録,JqueryJquery,偶数奇数指定

Posted by OBATA