: tbody 标签上的空选择器答案

【问题标题】：:empty selector on tbody tag: tbody 标签上的空选择器
【发布时间】：2013-07-30 03:09:42
【问题描述】：

给定下表：

<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 吗？

【问题讨论】：

【解决方案1】：

仅供参考：您可以使用以下 jQuery 选择器来选择具有空 tbody 的表格，而无需依赖表格元素的 id：

$("table:not(:has(>tbody>tr))")

【讨论】：

【解决方案2】：

不，不幸的是，tbody 中的缩进和换行符阻止它在这种情况下匹配 :empty。这适用于CSS 和jQuery，据我所知:empty 的行为相同，以及jQuery 的:parent，相当于:not(:empty)（带有very名称选择不当）。

此外，you cannot use CSS content to add elements to the DOM。您需要在 jQuery 或服务器端执行此操作：检查 tbody 是否有任何行，如果没有，则添加该行。

如果你使用 jQuery，你可以使用这个：

var tbody = $("#incidents tbody");

if (tbody.children().length == 0) {
    tbody.html("<tr>message foo</tr>");
}

【讨论】：

【解决方案3】：

在这种情况下，tbody 包含空白作为内容，所以它不起作用

:empty 伪类表示任何在全部。只有元素节点和文本（包括空格）是经过考虑的。评论或处理指令不影响是否一个元素是否被认为是空的。

此外，:content 只能与 :before 或 :after 伪元素一起使用

content CSS 属性与 ::before 和 ::after 一起使用伪元素在元素中生成内容。插入的对象使用 content 属性是匿名替换元素。

【讨论】：

【解决方案4】：

<tbody> 不是空的，因为它包含空格。您必须使用过滤功能来解决这个问题：

$("#incidents tbody").filter(function() {
    return !$.trim($(this).text());
}).append('<tr>message foo</tr>');

或者计算孩子的数量：

$("#incidents tbody").filter(function() {
    return !$(this).children().length;
}).append('<tr>message foo</tr>');

【讨论】：

【解决方案5】：

检查这个：

<table id="incidents">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

【讨论】：

【解决方案6】：

使用

$("#incidents tbody").html()

然后检查你得到了什么。

【讨论】：

【解决方案7】：

如果您想使用:empty，那么您需要将 tbody 语法指定为：

<tbody></tbody>

正如你所定义的 :empty 不会检查它，因为它有一个新行。

按照我告诉你的定义tbody。您也可以使用.html() 来检查条件：

if(!$("#incidents tbody").html()) {}

【讨论】：