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

Question

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

目前我正在使用：

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

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

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

任何想法如何让它适用于第二个？如果这样更简单，页面上将始终只有两个表格。

score 3 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

演示： http: //jsfiddle.net/bUqPX/1/ --感谢Fabrício :)

score 1 · Accepted Answer

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

或者您可以使用@ComputerArts 回答的:first-child选择器，这相当于:nth-child(1)按照文档。

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

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

score 0 · Accepted Answer

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

试试看，有没有可以查看代码的页面？

score 0 · Accepted Answer

首先选择table并执行一个findon tr:first。

下面假设这OpenCourse是一个用于收集表格的容器..

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

如果OpenCourse是表的类别，请尝试@Vision的答案

score 0 · Accepted Answer

尝试这个：

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

这将适用于页面上的所有表格。希望这可以帮助！！

6 回答 6