jquery - :empty selector on tbody tag

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

Answer 1

不，不幸的是，tbody 中的缩进和换行符阻止它在这种情况下匹配 :empty。这适用于 CSS和 jQuery ，据我所知，:empty 的行为与 jQuery 的 :parent 相同。 ，等同于 :not(:empty)(名称选择非常不佳)。

此外，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>");
}