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

做奇/偶用jQuery造型是很容易的：更有效的方法使用jQuery设置表格行的交替块？

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

现在我碰到一个interesitng问题今天就来了。如果您想要交替组的元素，该怎么办？例如，交替块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选择正确的行的方式？

来源

2009-02-05 cletus

在jQuery中做这类事情时的性能如何，而不是在原始HTML中对每行进行样式设置 - 如果您有一张大桌子，您是否看到它在屏幕上呈现而没有奇怪/甚至是重新渲染（闪烁）到正确的状态？ – 2009-02-06 09:19:03

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

来源

2009-02-05 12:24:34 pawel

第五行。我可能是错的，但我猜这是行不通的。 – ohnoes 2009-02-05 12:35:19

我测试过它在Firefox，IE和Opera，使用groupSize范围1到11，一切都很好:) – pawel 2009-02-05 13:02:38

为什么不使用addClass而不是attr（）？ – cletus 2009-02-06 01:54:00

克莱图斯，如果你想完成任务101％的jQuery上下的考虑：

使用each，而不是经典的for循环
extending jQuery selector behaviour？（只是一个提示）

来源

2009-02-05 12:34:32 ohnoes

我将一个类添加到第一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");} 
});

注意：我是从内存中写的，所以可能会有一些小毛刺在那里。请评论，如果是这样的话，我会解决它。

来源

2009-02-05 13:13:29 svinto

1）为什么有一个奇怪且A类，甚至，如果你有一个默认的样式，然后有一个奇怪的压倒一切的它可能会更快

2）你不能呈现出与造型的HTML已经申请？说如果你在PHP或ASP.net做这个。在事实较慢之后再做，特别是如果你有很多行。

来源

2009-02-05 13:18:44 dfasdljkhfaskldjhfasklhf

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

回答

相关问题