Webデザインで、奇数・偶数判断はわりとあります。
例えばテーブルデザインで、偶数行だけ背景に色を付けるなどです。
この場合たいていはCSSで奇数・偶数判断するのですが、たまにJqueryでやることもあります。
CSSとどちらでやるかはケースバイケースですが、今回はJqueryで判断する必要があったため、どのようにやるか調べてみました。
奇数を判断する。
まずは論より証拠。
こちらのサンプルは、Jqueryで奇数行に色を付けています。
ソースはこちらです。
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>リンク元</title>
<script src="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>
連続するLIタグの偶数個目に対し、Jqueryで色を付けています。
記述方法は要素に対して「:even」をつけるだけです。
上記の例だと以下の記述部分です。
$(“ul li:even”).css(“color”, “#F00”);
Jquery要素指定に:evenを付加すると、奇数要素指定になりました。
ちなみに偶数要素指定の方法
奇数ができるならば、偶数指定も当然あります。
奇数が:evenに対し、偶数は:oddを指定します。
| 奇数要素指定 | :even |
| 偶数要素指定 | :odd |
偶数要素指定のサンプルはこちらです。
奇数が赤、偶数が青になっています。
Jqueryの指定方法は無数にあります。
Jqueryは何となくプログラム記述に類似していますが、タグありきの指定がほとんどです。
なぜならば、とのタグに対してどのような動作をさせるかがJqueryの本質だからです。
なので、上から3個目といった個別指定も可能です。
今回は、数が無数にあったため、奇数・偶数指定が必要でした。
また本記事がお役に立てば幸いです。