Alternating background color of items in an unordered list
I have an Ul of item. I want to alternate there background color here is the html
<html>
<head>
<title>JQuery Problem 1</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="problem1.js"></script>
</head>
<body>
<ol>
<li>Comp 250
<ul>
<li>HTML</li>
<li>CSS</li>
<li>CGI</li>
<li>PHP</li>
<li>JavaScript</li>
</ul>
</li>
<li>Comp 345
<ul>
<li>Objects and classes</li>
<li>Static and constant members</li>
<li>Operator overloading</li>
<li>Templates</li>
<li>Inheritance</li>
<li>Polymorphism</li>
</ul>
</li>
<li>Comp 431
<ul>
<li>Perl language</li>
<li>File uploads and downloads</li>
<li>AJAX and JSON</li>
<li>Java Servlets</li>
<li>JSP</li>
</ul>
</li>
</ol>
</body>
</html>
Here is ma JQuery
$(document).ready(function()
{
$("ol > li").css({margin: "1em", fontWeight: "bold"});
$("ol li li").css({fontWeight: "normal"});
$("ul li").css('border', '1px solid white');
$("ul li").hover(function()
{
$(this).css('border', '1px solid red');
},
function()
{
$(this).css('border',开发者_开发知识库 '1px solid white')
});
});
Now i want to alternate, the first item in the ul should always be #FDD and the second #FFD
One line version:
$("ol > li").filter(":nth-child(odd)").css("background", "#FDD")
.end().filter(":nth-child(even)").css("background", "#FFD");
Two line version:
$("ol > li:nth-child(odd)").css("background", "#FDD");
$("ol > li:nth-child(even)").css("background", "#FFD");
or using each():
$("ol > li").each(function(i, val) {
$(this).css("background", i & 1 ? "#FFD" : "#FDD");
});
加载中,请稍侯......
精彩评论