javascript - 每次 生成时更改背景

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