Jquery 如何在动态列表中设置偶数和奇数子项的样式？

我正在使用

$('.js-toprow:nth-child(even)').css("background:", "#ddd");
$('.js-toprow:nth-child(odd)').css("background:", "#ff0000");

在函数内部：

function resetSlides() {
    container.css({
        'top': -1 * item_height
    });

// >> Using it here <<   
}

使元素树具有两种不同的颜色

完整的代码可以在这里看到，已经解决了：

在本例中，应该设置样式的变量是slides，因此我尝试使用slides.css{'background'：'000'}；里面的函数只是为了测试，它的工作，但我仍然需要偶数和奇数

---

是的，我只需要使用jQuery就可以做到这一点，因为使用CSS会导致在列表开头插入新元素时重新设置子元素的样式。

您可以迭代元素并测试索引，以确定它是偶数还是奇数：

$('.js-toprow').each(function(index) {
    if (index % 2 === 0) { // Even
      $(this).css('background', '#ddd');
    } else { // Odd
      $(this).css('background', '#ff0000');
    }        
});

---

模运算符返回除以两个数的余数，在本例中为index和2。偶数总是返回0。

为什么不使用纯CSS来解决这个问题？在这种情况下，如果您只想设置背景色，那么JavaScript似乎是不必要的。如果您想像使用偶数和奇数一样内联样式元素，则必须执行一些过滤，以选择那些应该获得事件样式的元素，而不是奇数样式，我这样做是因为我使用的是纯CSS。检查包含完整代码的页面，我说每次幻灯片前进和暂停一段时间，灰色背景都会改变颜色，我得到的回答是背景会改变，因为在css中，您使用的规则是：奇数和：偶数。然后移动第一个/最后一个元素。这会中断计数，并使项目从奇数索引更改为偶数索引，反之亦然。示例：项目位于索引3-奇数，然后将另一个项目添加到容器的开头，该项目不在索引4-偶数。因此，基本上，我已经找到了应该进行更改的位置，并且已经能够进行更改，但我不知道如何使用第n个childodd，你能帮我吗？是的，在jQuery中。我需要的样式是父。js toprow是我的父母。@Matt第n个孩子把我扔了。我更新了我的答案。成功了，但现在有个问题。它在x个元素之后重复一种颜色。重复的颜色是随机的。例如，现在它以相同的颜色显示一行中的两个元素。是否要查看网站以了解发生了什么情况？@Matt根据运行此操作后对DOM的操作方式，可能会导致颜色重复。您可能需要在运行此功能时进行调整，以达到所需的效果。