如何在jQuery中只选择元素的直接子元素

Question

我正在写一个带有一些jQuery风格的html页面.所以我有以下内容:

$("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

您可以使用子选择器 >.他们浏览器应该插入一个tbody元素:

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

Answer 2

Russ Cam鼓励我再次回答这个问题而不使用桌面上的标识符,这就是我想出的:

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

在这里,我选择所有td的,在每个奇数行,在不是a的子项的表中<td>.在这里工作演示.