0

用 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 风格的方式来选择正确的行？

4

4 回答 4

3 
function oddEvenGroupStyle(groupSize) {
    var even = false;
    $('tr').each( 
        function(i){ 
            if(!(i % groupSize)) even = !even;
            $(this).attr('class', (even ? 'groupEven':'groupOdd') ); 
    })
}
于 2009-02-05T12:24:34.053 回答
2

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

  1. 使用each而不是经典的 for 循环
  2. 扩展 jQuery 选择器行为？（只是一个提示）
于 2009-02-05T12:34:32.690 回答
0

我会在组中的第一个 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-05T13:13:29.493 回答
0

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

2）你不能用已经应用的样式渲染出html吗？说如果您在 PHP 或 ASP.net 中执行此操作。事后这样做会更慢，特别是如果你有很多行。

于 2009-02-05T13:18:44.363 回答