Question

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

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

现在我遇到了一个有问题的问题。如果您想要替换组元素的样式，该怎么办？例如，交替使用3. Longhand的块可以这样做：

$(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-ish方法来选择正确的行？

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

克莱托斯，如果你想完成工作101％jQuery-ish考虑：

使用each代替经典for循环
extending jQuery selector behaviour？（只是一个提示）

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中这样做。在事实变慢之后这样做，特别是如果你有很多行。

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

4 个答案: