:even & :odd - 在每个元素设置样式后重置答案

【问题标题】：:even & :odd - resetting after each element styled:even & :odd - 在每个元素设置样式后重置
【发布时间】：2011-12-21 11:12:59
【问题描述】：

我有以下功能来设置列表元素的样式：

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 在完成每个元素后重置计数吗？感谢您的帮助。

【问题讨论】：

既然可以使用 CSS，为什么还要使用 JS？
也许他需要支持旧浏览器？
当然，但这就是为什么它是评论而不是答案。这也可能是一个过度设计的解决方案，因为他们已经习惯于用 JS 解决问题。 ;-)

标签： jquery

【解决方案1】：

你只需要像这样拆分它：

$(".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 */
}

【讨论】：

您似乎也可以调整代码，以便仅从偶数行中删除 odd-row，并从奇数行中删除 even-row。不过，我怀疑这会对效率产生很大影响，而且肯定不会更短。
感谢您，效果很好。顺便说一句，我并没有声称自己是 jquery 专家，我毫不怀疑我的解决方案曾经是最优的......

【解决方案2】：

如果您有多个.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');
    });
}

【讨论】：