根据下表:
<table id="incidents">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
使用jQuery,下面的计算结果为false
:
$("#incidents tbody").is(":empty")
我想使用CSS将内容设置为消息:
#incidents tbody:empty {
content: "<tr>message foo</tr>";
}
:empty
选择器可以应用于tbody吗?
8条答案
按热度按时间ddrv8njm1#
不,不幸的是,
tbody
中的缩进和换行符使它在本例中无法匹配:empty
。这适用于CSS和jQuery,据我所知,:empty
的行为相同,以及jQuery的:parent
,它相当于:not(:empty)
(名称的选择非常糟糕)。此外,您不能使用CSS
content
向DOM添加元素。你需要在jQuery或服务器端这样做:检查tbody
是否有任何行,如果没有,则添加该行。如果你使用jQuery,你可以这样做:
svgewumm2#
在本例中,tbody包含白色作为内容,因此它不会工作
:empty
:empty伪类表示任何没有子元素的元素。只考虑元素节点和文本(包括空白)。注解或处理指令不影响元素是否为空。
此外,:content只能与:before或:after伪元素一起使用
content CSS属性与::before和::after伪元素一起使用,以在元素中生成内容。使用content属性插入的对象是匿名替换元素。
wydwbb8l3#
如果你想使用
:empty
,那么你需要给予tbody语法,如:因为你已经定义了:empty,所以它不会检查,因为它有一个新的行。
tbody
的定义正如我告诉你的。您也可以使用.html()
来检查条件:参考:How do I check if an HTML element is empty using jQuery?
xpcnnkqh4#
<tbody>
不是空的,因为它包含空格。你必须使用一个过滤函数来解决这个问题:或者计算孩子的数量:
whitzsjs5#
仅供参考:你可以使用下面的jQuery选择器来选择一个tbody为空的表,而不依赖于表元素的id:
0s7z1bwu6#
使用
然后检查你得到了什么。
qncylg1j7#
2023年的CSS:
r6l8ljro8#
检查这个: