Question

我有以下函数来设置列表元素的样式：

function styleRows() {
    $(".pretty-list li").removeClass("even-row").removeClass("odd-row");
    $(".pretty-list li:even").addClass("even-row");
    $(".pretty-list li:odd").addClass("odd-row");
}

然后我给任何<ul>我想要的'漂亮列表'类，一切都很好。但是我有各种各样的JS淡化/删除行，然后我调用这个函数来重新排列行。虽然计数继续通过每个不同的<ul>，所以如果有2个列表并且第一个结束在奇数行上，那么第二个将在偶数上开始 - 我希望每个样式元素以奇数行开始。

是否有可能告诉jQuery / JS在完成每个元素后重置计数？谢谢你的帮助。

Answer 1

如果您在列表中有多个.pretty-lists范围并分别处理每个范围：

function styleRows() {
    $(".pretty-list li").removeClass("even-row").removeClass("odd-row");
    $(".pretty-list").each(function() {
      $('li:even', $(this)).addClass('even-row');
      $('li:odd', $(this)).addClass('odd-row');
    });
}

Answer 2

你只需将它分开：

$(".pretty-list").each(function () {
    $(this).find("li").removeClass("even-row odd-row")
        .filter(":even").addClass("even-row").end()
        .filter(":odd").addClass("odd-row");
});

使用each函数是重要的一点。我还添加了一些更多的触摸（如果它们有效 - 它未经测试）应该有希望使它更有效率。

值得注意的是，all modern browsers支持您使用简单CSS进行的操作，这更容易维护。

.pretty-list li:nth-child(2n) {
    /* your 'even' styles */ 
}
.pretty-list li {
    /* your 'odd' styles */
}

：偶数＆amp; ：odd - 在每个元素样式后重置

2 个答案: