jQuery :tbody 标签上的空选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17939093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:empty selector on tbody tag
提问by Darbio
Given the following table:
鉴于下表：
<table id="incidents">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Using jQuery the following evaluate as false:
使用 jQuery 计算如下false：
$("#incidents tbody").is(":empty")
I would like to use CSS to set the content to be a message:
我想使用 CSS 将内容设置为消息：
#incidents tbody:empty {
content: "<tr>message foo</tr>";
}
Can the :emptyselector be applied to tbody?
可以:empty选择适用于TBODY？
回答by BoltClock
No, unfortunately the indentation and newlines within tbodyprevent it from ever matching :emptyin this case. This applies both to CSSand jQuery, where as far as I know :emptybehaves identically, as well as jQuery's :parent, which is equivalent to :not(:empty)(with a verypoor choice of name).
不，不幸的是，在这种情况下，缩进和换行符tbody阻止了它的匹配:empty。这适用于CSS和jQuery，据我所知，它们的:empty行为相同，以及 jQuery 的:parent，它相当于:not(:empty)（名称选择非常糟糕）。
Furthermore, you cannot use CSS contentto add elements to the DOM. You'll need to do this in jQuery or the server side: check if tbodyhas any rows and if not, add that row.
此外，您不能使用 CSScontent向 DOM 添加元素。您需要在 jQuery 或服务器端执行此操作：检查是否tbody有任何行，如果没有，请添加该行。
If you go with jQuery, you can use this:
如果你使用 jQuery，你可以使用这个：
var tbody = $("#incidents tbody");
if (tbody.children().length == 0) {
tbody.html("<tr>message foo</tr>");
}
回答by Arun P Johny
In this case tbody contains white space as content, so it won't work
在这种情况下 tbody 包含空白作为内容，所以它不会工作
The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.
:empty 伪类代表任何根本没有子元素的元素。只考虑元素节点和文本（包括空格）。注释或处理指令不会影响元素是否被视为空。
Also the :contentcan be used only with :beforeor :afterpseudo elements
此外:content只能与:before或:after伪元素一起使用
The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.
content CSS 属性与 ::before 和 ::after 伪元素一起使用以在元素中生成内容。使用 content 属性插入的对象是匿名替换元素。
回答by Blender
The <tbody>isn't empty, as it contains whitespace. You'll have to use a filtering function to get around that:
该<tbody>不是空的，因为它包含空格。您必须使用过滤功能来解决这个问题：
$("#incidents tbody").filter(function() {
return !$.trim($(this).text());
}).append('<tr>message foo</tr>');
Or count the number of children:
或者计算孩子的数量：
$("#incidents tbody").filter(function() {
return !$(this).children().length;
}).append('<tr>message foo</tr>');
回答by Code L?ver
If you want to use the :emptythen you need to give the tbody syntax like as:
如果要使用，:empty则需要提供 tbody 语法，如下所示：
<tbody></tbody>
As you have define the :empty will not check that as it have a new line.
正如您所定义的 :empty 不会检查它，因为它有一个新行。
Define the tbodyas I have told you.
You can also use the .html()to check the condition:
tbody正如我告诉你的那样定义。您还可以使用.html()来检查条件：
if(!$("#incidents tbody").html()) {}
Reference: How do I check if an HTML element is empty using jQuery?
回答by Niels R.
FYI: You can use the following jQuery selector to select a table with an empty tbody without depending on the id of the table element:
仅供参考：您可以使用以下 jQuery 选择器来选择一个带有空 tbody 的表，而不依赖于表元素的 id：
$("table:not(:has(>tbody>tr))")
回答by kul_mi
Use
用
$("#incidents tbody").html()
and then check what you get.
然后检查你得到了什么。
回答by Abhishek Jain
Check for this:
检查这个：
<table id="incidents">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
