Question

我有一张桌子，我希望前3 TD有不同的背景颜色。我想我可以使用:lt() Selector，但此时我只能给前3个TD相同的黄色背景颜色。

我使用以下代码：

<script>
$( "td:lt(3)" ).css( "backgroundColor", "yellow" );
</script>

但如上所述，我希望al 3 TD具有不同的背景颜色。如何为第一个TD提供黄色背景，第二个TD为蓝色背景，第三个TD为红色背景？

谢谢

Answer 1

听起来像是一个很好的案例：nth-child ......和：first-child，因为你只需要排在第一行。

小提琴：http://jsfiddle.net/8GUTp/2/

<script>
$( "tr:first-child td:nth-child(1)" ).css( "backgroundColor", "yellow" );
$( "tr:first-child td:nth-child(2)" ).css( "backgroundColor", "blue" );
$( "tr:first-child td:nth-child(3)" ).css( "backgroundColor", "red" );
</script>

Answer 2

使用:nth-child选择器：

<script>
    $('td:lt(3):nth-child(1)').css('backgroundColor','yellow');
    $('td:lt(3):nth-child(2)').css('backgroundColor','blue');
    $('td:lt(3):nth-child(3)').css('backgroundColor','red');
</script>

演示： http://jsfiddle.net/6u4Yu/3/

Answer 3

我认为你正在寻找一个简单的

var tds = $("td");
tds.eq(0).css( "backgroundColor", "yellow" );
tds.eq(1).css( "backgroundColor", "blue" );
tds.eq(2).css( "backgroundColor", "red" );

如果您想重复td选项（不应该这样做），也可以使用:eq() as a selector。

或者，这样做：

$( "td:lt(3)" ).css( "backgroundColor", function(i) {
    return ["yellow", "blue", "red"][i];
});

使用以下每个元素的不同背景颜色：lt（3）Selector

3 个答案: