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;
}

修改

正如杰伊哈里斯所说，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() pseudo class，但iE8及以下版本不支持它。

如果您使用JS生成，则可以使用计数器或modulus operator。

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/

每<li>生成</li>更改背景

3 个答案: