用jquery为多表中的第一行着色

Question

我正在使用这个 css 代码：

.even{
    background: #E4ECF6;
}
.odd{
    background: #F3F7FB;
}
.firstrow{
    background-color: #599ECF;
}

我正在使用这个 css jquery 代码：

$(document).ready(function(){
$('table tr:even').addClass('even');
$('table tr:odd').addClass('odd');
$('table tr:first').addClass('firstrow');
});

此代码在第一个表中正确运行。但是当我有两个或更多表时，此代码可以为第一个表的第一行着色。为所有表中的所有第一行着色更好的代码？

Answer 1

尝试替换

$('table tr:first').addClass('firstrow');

与

$('table tr:first-child').addClass('firstrow');

关键是使用:first-child选择器，

选择作为其父元素的第一个子元素的所有元素。

现场演示here。

---

如果你仍然想要 :first 选择器，你可以这样做：

$(document).ready(function () {
  $('table tr:even').addClass('even');
  $('table tr:odd').addClass('odd');
  $('table').each(function () {  // For each 'table'...
    $(this).find('tr:first').addClass('firstrow');  // Add class 'firstrow' to the first 'tr'.
  });
});

现场演示here。