JQuery-隔行换色

<div class="ul-list  UlList">
	<ul>
		<li><a href="">这是第一行,奇数</a></li>
		<li><a href="">这是第二行,偶数</a></li>
		<li><a href="">这是第三行,奇数</a></li>
		<li><a href="">这是第四行,偶数</a></li>
		<li><a href="">这是第五行,奇数</a></li>
		<li><a href="">这是第六行,偶数</a></li>
	</ul>
</div>
<style type="text/css" media="screen">
	*{ margin: 0; padding: 0; }
	ol,ul li{ list-style: none; }
	a{ color: #000; text-decoration: none; }
	img{ border: none; }

	.ul-list ul li{
		font-size: 14px;
		line-height: 30px;
		padding-left: 20px;
	}

	.ul-list .odd{
		background-color: #999;
	}
	
	.ul-list .even{
		background-color: #d2d2d2;
	}

</style>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$(".UlList ul li:odd").addClass('odd');
		$(".UlList ul li:even").addClass('even');

		//$(".UlList ul li:nth-child(2n)").addClass('odd');
		//$(".UlList ul li:nth-child(2n+1)").addClass('even');

		//var Li = $(".UlList ul li");
		//for (var i = 0; i <= Li.length; i++) {
		//	if (i%2 == 0) {
		//		Li.eq(i).addClass('odd');
		//	}
		//}

	})
</script>

猜你喜欢

转载自blog.csdn.net/weixin_41707342/article/details/82562748