我正在编写一个 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"});
});
最佳答案
您可以使用 child selector >
。他们的浏览器应该插入一个 tbody
元素:
$("#myTable > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});
关于jquery - 如何在 jQuery 中仅选择元素的直接子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1558767/