jquery - : tbody 标签上的空选择器

Question

给定下表：

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

score 27 · Accepted Answer

不，不幸的是，在这种情况下，缩进和换行tbody阻止它永远匹配:empty。这适用于CSS和jQuery，据我所知，它们:empty的行为相同，以及 jQuery's :parent，相当于:not(:empty)（名称选择非常差）。

此外，您不能使用 CSScontent向 DOM 添加元素。您需要在 jQuery 或服务器端执行此操作：检查是否tbody有任何行，如果没有，则添加该行。

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

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

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

score 3 · Accepted Answer

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

:empty 伪类表示任何没有子元素的元素。仅考虑元素节点和文本（包括空格）。注释或处理指令不会影响元素是否被视为空。

:content也只能与:before或:after伪元素一起使用

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

score 2 · Accepted Answer

如果你想使用，:empty那么你需要给 tbody 语法，如：

<tbody></tbody>

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

tbody 正如我告诉你的那样定义。您还可以使用.html()来检查条件：

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

score 2 · Accepted Answer

<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>');

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

0

利用

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

然后检查你得到了什么。

于 2013-07-30T05:48:08.620 回答

score -1 · Accepted Answer

检查这个：

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

7 回答 7