每次更换背景 <li> 产生

Question

每当有人添加项目时，我都有一个由javascript生成的列表：html看起来像这样：

<ul class="items-listed-rc">
    <li>1 generated by javascript</li>
    <li>2 generated by javascript</li>
    <li>3 generated by javascript</li>
    <li>4 generated by javascript</li>
    ...
</ul>

目前所有的都是蓝色背景，我想

2和4具有不同的背景，所以继续..蓝色，红色，蓝色，红色，蓝色，红色...

Answer 1

您可以使用CSS选择器nth-child：

.items-listed-rc li:nth-child(even){
    background:red;
}​

编辑

正如杰伊·哈里斯（Jay Harris）所提到的，IE8和更低版本不支持CSS选择器nth-child。 您可以使用jQuery：

$(document).ready(function() {
    $(".items-listed-rc li:nth-child(even)").addClass("even");
});

CSS：

.items-listed-rc li.even{
    background:red;
}

Answer 2

如果您需要使用JavaScript进行此操作，则可以执行

$(".items-listed-rc li:odd").css("background-color", "red")
$(".items-listed-rc li:even").css("background-color", "blue")

否则，css选项会更好，因为不需要添加额外的js代码，因为我们知道选择器的兼容性。

Answer 3

这实际上取决于您如何添加列表项。 正如其他人所提到的，最好的方法可能是使用nth-child()伪类 ，但iE8及以下版本不支持它。

如果使用JS生成，则可以使用计数器或模数运算符 。

var ul = document.getElementById("items");
for (var i = 1; i < 6; i++){
    var li = document.createElement("li");

   // Set odd/even class name 
    li.className = (i%2 == 1 ? "odd" : "even" );

    li.appendChild(document.createTextNode("#"+i+" Created with JavaScript"));
    ul.appendChild(li);
}

http://jsfiddle.net/daCrosby/xBcFQ/