2

每次有人添加项目时，我都有一个由 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有不同的背景，所以继续......蓝色，红色，蓝色，红色，蓝色，红色......

    • 4

    3 回答 3

    2

    您可以使用 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;
}
    于 2013-07-04T19:44:36.327 回答
    1

    如果您需要使用 javascript 执行此操作，您可以执行此操作

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

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

    于 2013-07-04T19:45:26.347 回答
    1

    这实际上取决于您如何添加列表项。正如其他人所提到的，可能最好的方法是使用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/

    于 2013-07-04T20:07:12.933 回答