Web-Gimmick Web制作と知識のメモ帳

超がつくほど簡単に奇数と偶数を判別してクラスをあたえる方法。

2015/10/20

jQuery

奇数と偶数を判別したいときってあります。
よくあるのはリストやテーブルで表をつくるような時。
おなじ様な項目が並ぶことになるので見にくくなりがち。
奇数列と偶数列でクラスを追加してCSSで背景色をかえてあげるとスッキリみやすくなります。

超がつくほど簡単に奇数と偶数を判別してクラスをあたえる方法。

リストなんかは代表的な形ですが、
ほかにも使いどころってたくさんあったりするので覚えておいて損なし。
これ以上ないであろう超簡単コードです。

奇数・偶数にクラスを追加するデモ

デモでは奇数行にクラスodd、偶数行にはクラスevenを追加。
クラス名も自由に変更できます。

  • 1.奇数行 クラスodd
  • 2.偶数行 クラスeven
  • 3.奇数行 クラスodd
  • 4.偶数行 クラスeven
  • 5.奇数行 クラスodd
  • 6.偶数行 クラスeven

こんな感じ。

奇数・偶数にクラスを追加する記述方法

HTMl

<div id="demo">
	<ul>
		<li>1.奇数行 クラスodd</li>
		<li>2.偶数行 クラスeven</li>
		<li>3.奇数行 クラスodd</li>
		<li>4.偶数行 クラスeven</li>
		<li>5.奇数行 クラスodd</li>
		<li>6.偶数行 クラスeven</li>
	</ul>
</div>

CSS

#kiji #demo li{
	color: #fff;
	padding: 8px;
}
#kiji #demo li.odd{
	background-color: #becef5;
}
#kiji #demo li.even{
	background-color: #7998e5;
}

javascript

jQueryがいるのでダウンロードする。
ソースは超簡単。

//ODD・EVEN
$(function(){
$('#demo ul li:nth-child(odd)').addClass("odd");
$('#demo ul li:nth-child(even)').addClass("even");
});

「'#demo ul li」の部分で奇数・偶数にクラスを追加したい要素を指定。
「.addClass("odd")」で追加したいクラス名を変更できます。

関連する記事はこちら

コメントをどうぞ

サイト内検索

Copyright ShitteLog All rights reserved.