Javascript 使用jQuery设置交替表行块样式的更有效方法？

使用jQuery进行奇偶样式设置非常简单：

$(function() {
  $(".oddeven tbody tr:odd").addClass("odd");
  $(".oddeven tbody tr:even").addClass("even");
});

今天我遇到了一个有趣的问题。如果要设置元素的交替组的样式，该怎么办？例如，3的交替块。这可以通过以下方式实现：

$(function() {
  $(".oddeven3 tbody tr:nth-child(3n+1)").addClass("odd");
  $(".oddeven3 tbody tr:nth-child(3n+2)").addClass("odd");
  $(".oddeven3 tbody tr:nth-child(3n+3)").addClass("odd");
  $(".oddeven3 tbody tr:nth-child(3n+4)").addClass("even");
  $(".oddeven3 tbody tr:nth-child(3n+5)").addClass("even");
  $(".oddeven3 tbody tr:nth-child(3n+6)").addClass("even");
});

但似乎有点冗长。现在，它可以稍微简化并变得通用，如下所示：

function oddEvenGroupStyle(groupSize) {
  for (var i=1; i<=groupSize; i++) {
    $(".oddeven" + groupSize + " tbody tr:nth-child(" + groupSize + "n+" + i + ")").addClass("odd");
    $(".oddeven" + groupSize + " tbody tr:nth-child(" + groupSize + "n+" + (groupSize+i) " + ")").addClass("even");
  }
}

---

不过对我来说似乎有点像黑客。是否还有其他jQuery-ish方法来选择正确的行？

cletus，如果您想完成101%jQuery-ish的工作，请考虑：

function oddEvenGroupStyle(groupSize) {
    var even = false;
    $('tr').each( 
        function(i){ 
            if(!(i % groupSize)) even = !even;
            $(this).attr('class', (even ? 'groupEven':'groupOdd') ); 
    })
}

使用

each

代替经典for循环

?？（只是一个提示）

---

克莱特斯，如果你想完成这项工作，请考虑：

使用

each

代替经典for循环

?？（只是一个提示）

---

我将向组中的第一个TR添加一个类：

<tr class="group"><td>Group 1</td></tr>
<tr class="grouppart"><td>Part of group 1</td></tr>
<tr class="grouppart"><td>Part of group 1</td></tr>
<tr class="group"><td>Group 2</td></tr>
...

---

注意：我是根据记忆写的，所以可能有一些小故障。如果是这种情况，请发表意见，我会解决它。

我会向组中的第一个TR添加一个类：

<tr class="group"><td>Group 1</td></tr>
<tr class="grouppart"><td>Part of group 1</td></tr>
<tr class="grouppart"><td>Part of group 1</td></tr>
<tr class="group"><td>Group 2</td></tr>
...

注意：我是根据记忆写的，所以可能有一些小故障。如果是这种情况，请发表意见，我会解决它。

1）为什么要有一个奇数和偶数类，如果你有一个默认样式，然后有一个覆盖奇数，它可能会更快

2） 你不能用已经应用的样式呈现html吗？假设您是在PHP或ASP.net中执行此操作。事后处理的速度较慢，特别是当您有很多行时。

1）为什么要使用奇数和偶数类，如果您使用默认样式，然后使用覆盖奇数，则速度可能会更快

---

2） 你不能用已经应用的样式呈现html吗？假设您是在PHP或ASP.net中执行此操作。事后做会比较慢，尤其是如果你有很多行的话。

我在Firefox、IE和Opera中测试过，使用范围从1到11的groupSize，一切都很好：）你为什么不使用addClass而不是attr（）？+1我只有一个奇数类（但我想在偶数类的更一般情况下也会这样问），这将逻辑简化为（i/groupSize）&1==0，但这基本上就是我使用的。谢谢。我已经在Firefox、IE和Opera中测试过了，使用范围为1到11的groupSize，一切都很好：）为什么不使用addClass而不是attr（）？+1我只有一个奇数类（但我想在更一般的偶数类情况下也会问），这将逻辑简化为（I/groupSize）&1==0，但这基本上就是我使用的。谢谢。这主要是针对静态内容，所以我只想用最少的CSS控制样式，最好只是在表中添加一个类。这主要是针对静态内容，所以我只想用最少的CSS控制样式，最好只是在表中添加一个类。碰巧我只有一个奇数类，但我想我会在更一般的情况下问你想要两个。碰巧我只有一个奇数类，但我想我会在更一般的情况下问你想要两个。+1有趣的想法。上面的解决方案是解决这个问题的一个更快的途径，但我肯定会在稍后研究这个问题。我喜欢这个主意。上面的解决方案是解决这个问题的一个更快的途径，但我肯定会在稍后研究这个问题。我喜欢它的想法。在jquery中执行这种操作而不是在原始HTML中设置每一行的样式时，性能如何？如果您有一个大表，您是否看到它在屏幕上呈现，而没有奇数/偶数，然后重新呈现（闪烁）在jquery中执行此类操作而不是在原始HTML中设置每一行的样式时，性能如何？如果您有一个大表，您是否看到它在屏幕上呈现时没有奇数/偶数，然后重新呈现（闪烁）到正确的状态？

// Format the groups:
$("tr.group:even").addClass("even");
$("tr.group:odd").addClass("odd");

// Then apply to groupparts:
$("tr.grouppart").each(function(){
    var oGroup = $(this).prevAll("tr.group:first");
    if(oGroup.hasClass("even")){$(this).addClass("even");}
    if(oGroup.hasClass("odd")){$(this).addClass("odd");}
});