如何使用jQuery为页面上的每个表的第一行设置样式

Question

我需要手动设置页面上每个表的第一行的样式。不幸的是我正在处理一些旧的浏览器，所以想通过jQuery来做这件事。

目前我正在使用：

$(function() {
 $(".OpenCourse tr:first").addClass("OpenCoursesHeader");
});

然后将.OpenCoursesHeader td {}添加到样式。

类OpenCoursesHeader似乎只适用于第一个表。

我是如何将它应用到第二个的？如果这样做更简单，页面上总会只有两个表。

Answer 1

您可以使用first-child选择器。 first只会选择您正在使用的选择器的第一个元素。

$(function() {
 $(".OpenCourse tr:first-child").addClass("OpenCoursesHeader");
});

但是如果您有嵌套表，此解决方案也会将该类添加到第一个tr。

Answer 2

您可以使用find()，它会起作用：

$(".OpenCourse").find("tr:first").addClass("OpenCoursesHeader");

DEMO： http://jsfiddle.net/bUqPX/1/ - 感谢Fabrício：）

Answer 3

$(function() {
    $(".OpenCourse tr:nth-child(1)").addClass("OpenCoursesHeader");
});

Fiddle

:nth-child() selector Reference

或者您可以使用:first-child selector作为@ComputerArts的答案，相当于:nth-child(1) documentation。

此外，如果您有<thead> / <tbody> / <tfooter>个元素，这可能无法正常工作，在这种情况下，您必须在选择器中指定要应用样式的元素以及：

$(".OpenCourse thead:nth-child(1) tr:nth-child(1)").addClass("OpenCoursesHeader");

Answer 4

试试这个：

$(function() {  
     $("table tr:first").addClass("OpenCoursesHeader"); 
});

这将适用于页面上的所有表格。希望这有助于!!

Answer 5

$(function() {
    $(".OpenCourse").each(function() {
        $("tr:first",this).addClass("OpenCoursesHeader");
    });
});

尝试一下，是否有一个包含我们可以查看的代码的页面？

Answer 6

首先选择table并在find上执行tr:first。

下面假设OpenCourse是收集表的容器..

$(".OpenCourse table").find("tr:first").addClass("OpenCoursesHeader");

如果OpenCourse是表格的类，请尝试@Vision的回答