jquery - 如何在 jQuery 中仅选择元素的直接子元素

Question

我正在编写一个 html 页面，其中包含一些 jQuery 样式。所以我有以下内容:

$("table tr:odd td").css({"background-color":"rgb(233,247,255)"});

这使得每隔一行都变成蓝色。但刚才，我在其中一个单元格内放置了一张表格。发生了什么？好吧，它将内表的行视为外表中的一行，并且颜色变得困惑(两个连续的蓝色行，而内表中的行则为白色)。

那么，如何在这样的选择器中排除子表呢？有人吗？

编辑:

感谢您的想法和回答。我想出了这段代码，因为我真正想要的是让所有表都具有偶数/奇数着色(不仅仅是顶级表):

$("table").each(function()
{   $(this).children().children(":odd").css({"background-color":"rgb(240,255,250)"});
     $(this).children().children(":even").css({"background-color":"rgb(233,247,255)"});
}); 

问题是，这似乎只为第一行着色 - 我不知道为什么。有人明白为什么吗？

解决方案:我明白了。问题是浏览器实际上会插入一个 tbody 标签，你必须弄清楚它。这是我使用的最终结果:

$("table").each(function()
{   $(this).children().children(":odd").children().css({"background-color":"green"});
     $(this).children().children(":even").children().css({"background-color":"blue"});
}); 

Answer 1

您可以使用 child selector >。他们的浏览器应该插入一个 tbody 元素:

$("#myTable > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});