使用 jQuery 设计表格行交替块的更有效方法？

Question

使用 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");
  }
}

并且：

$(function() {
  oddEvenGroupStyle(3);
});

对我来说似乎有点黑客。 是否有一些更类似 jQuery 的方法来选择正确的行？

Answer 1

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

Answer 2

cletus，如果你想完成 101% jQuery 风格的工作，请考虑：

1. 使用 each 而不是经典的 for 循环
2. 扩展 jQuery 选择器行为？ （只是一个提示）

Answer 3

我会向组中的第一个 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>
...

这样您就可以随时更改组的大小，而无需对 javascript 进行任何修改。

// 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");}
});

注：这是我凭记忆写的，所以可能有一些小错误。 如果是这种情况，请发表评论，我会修复它。

Answer 4

1) 为什么有一个奇数 AND 和一个偶数类，如果你有一个默认样式，然后有一个压倒一切的奇数，它可能会更快

2) 你不能渲染出已经应用样式的 html 吗？ 说明您是在 PHP 还是 ASP.net 中执行此操作。 事后执行会比较慢，尤其是当您有很多行时。