Question

我已经看过很多关于如何替换列表或行的背景颜色的帖子。

$('#news tbody').each(function() {
    $(this).children('tr:odd').addClass('alt');
});

我明白了。但是，如果我想要三行交替背景怎么办？换句话说，第一种颜色，第二种颜色，第三种颜色，然后重复。我只能成功地为每三分之一添加背景颜色而不重叠。有什么建议吗？

Answer 1

您可以使用nth-child选择器在纯CSS中执行此操作：

#news tbody tr:nth-child(3n+1) {
    background-color: #C00;
}

#news tbody tr:nth-child(3n+2) {
    background-color: #0C0;
}

#news tbody tr:nth-child(3n+3) {
    background-color: #00C;
}

或者你可以使用数组和模运算符在jQuery中实现这一点：

var classes = ['first', 'second', 'third'];
$('#news tbody tr').each(function(i) {
   $(this).addClass(classes[i % classes.length]);
});

Answer 2

您可以在CSS中使用：nth-child，无需JavaScript。 http://www.quirksmode.org/css/selectors/nthchild.html

Answer 3

使用伪类:nth-of-type

例如，您可以使用

tr:nth-of-type(2)
{
background-color: red;
}

这会将第二行更改为红色。但你可以使用一个带有n的公式来重复行，所以例如nth-of-type（3n + 2）会给你第二行（n = 0），然后是第五行（n = 1），然后是第八行（n = 2），依此类推。一旦你的公式恰到好处，你就可以玩你喜欢的行。

如果您还希望第一行不同（即标题），只需使用（1）。

如何替换列表/行的每个第二和第三背景？

3 个答案: