jQuery 如果它们是空的，则隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5327751/
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
Hide div's if they are empty
提问by Blankman
I have some div's that maybe be empty (depending on server-side logic).
我有一些 div 可能是空的（取决于服务器端逻辑）。
<div id="bar">
<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>
</div>
If they don't have any html inside the div's (with class section), I just want to hide them.
如果他们在 div 中没有任何 html（带类部分），我只想隐藏它们。
How can I do this?
我怎样才能做到这一点？
回答by Rocket Hazmat
回答by Elliot Wood
Here is a CSS3 solution for anyone who is interested
这是任何有兴趣的人的 CSS3 解决方案
div:empty {
display:none;
}
回答by Raynos
回答by RVC
If div contains white-space or line breaks then this code may be helpful...
如果 div 包含空格或换行符，则此代码可能会有所帮助...
$(document).ready(function() {
str = $('div.section').text();
if($.trim(str) === "") {
$('div.section').hide();
}
});
回答by TarranJones
There are many options, it all depends on what your preferences are.
The more compact the answer the less readable it becomes, is speed important, and how effective should the empty function be, an element containing no nodes is not the same as an :emptyelement.
有很多选择，这完全取决于您的喜好。答案越紧凑，可读性越低，速度很重要，空函数应该多有效，不包含节点的:empty元素与元素不同。
Most compact / Slow / Very Effective / readable / generic selector
最紧凑/最慢/非常有效/可读/通用选择器
$('.section:empty').hide();
Very compact / little faster (still Slow) / Very Effective / readable / less generic selector
非常紧凑/稍微快一点（仍然很慢）/非常有效/可读/不太通用的选择器
$('div.section:empty').hide();
Compact / Faster / Very Effective / readable / specific selector
紧凑/更快/非常有效/可读/特定选择器
$("#bar").find('div.section:empty').hide();
I'm Going to stick with the more specifc selector as it is faster.
我将坚持使用更具体的选择器，因为它更快。
Less Compact / Even Faster / Very Effective / still less readable
不那么紧凑/甚至更快/非常有效/仍然不太可读
$("#bar").find('div.section').filter(function(i,elem) {
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
if ( elem.nodeType < 6 ) {
return false;
}
}
return true;
}).hide();
Still Less Compact / Even Faster Still / Very Effective / still less readable
仍然不那么紧凑/仍然更快/非常有效/仍然不太可读
$("#bar").find('div.section').each(function(i,elem){
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
if ( elem.nodeType < 6 ) {
return;
}
}
$(this).hide();
})
Compact-ish / Much Faster / Less Effective / less readable
紧凑型/更快/效率较低/可读性较差
// Faster Still but less precise
$("#bar").find('div.section').filter(function() {
return !this.firstChild;
}).hide();
Less Compact / Much Faster Still / Less Effective / less readable
不太紧凑/仍然更快/效率较低/可读性较差
$("#bar").find('div.section').each(function(){
if(!this.firstChild){
$(this).hide();
}
})
Effective Solution
有效的解决方案
The more Effective Solutions use the same approach used by the 'empty' jqueryfilter, it tries to replicate the functionality of the CSS3 :emptypseudo-class by taking into account the nodeType.
For example if a child element had nodeType == COMMENT_NODE(<!-- -->) then the parent will still be seen as empty.
更有效的解决方案使用与“空” jquery过滤器相同的方法，它尝试:empty通过考虑 nodeType来复制 CSS3伪类的功能。例如，如果子元素具有 nodeType == COMMENT_NODE( <!-- -->) 则父元素仍将被视为空。
All of these Approaches could be improved by replacing the .hide()with .addClass('hide')and adding a .hideclass to your CSS.
所有这些方法都可以通过替换.hide()with并向您的 CSS.addClass('hide')添加一个.hide类来改进。
<style>
.hide {
display:none;
}
</style>
but if this sounds like an appropriate solution for you then @elliot-wood 's CSS3 Answeris probably better suited.
但如果这听起来对您来说是一个合适的解决方案，那么 @elliot-wood 的 CSS3 答案可能更适合。
My personal preference
我的个人喜好
$("#bar").find('div.section').filter(function() {
return !this.firstChild;
}).hide();
Even though this approach doesn't check nodeType and it uses .filter()method rather than the faster .each(). It is just a more compact and readable solution.
即使这种方法不检查 nodeType 并且它使用.filter()method 而不是 fast .each()。它只是一个更紧凑和可读的解决方案。
回答by rsplak
$('div').each(function() {
if($(this).html().size() == 0) $(this).remove();
});
If you want to use the divs later on in the same page, it's better to use $(this).hide();instead of $(this).remove();as the divs will be deleted if you use remove();
如果您想稍后在同一页面中使用 div，最好使用$(this).hide();而不是$(this).remove();因为如果您使用 remove()，div 将被删除；
回答by Michael Laffargue
Do you have access to server logic?
您有权访问服务器逻辑吗？
Else client side you could do something like:
其他客户端，您可以执行以下操作：
$(function() {
$('div').each(function() {
if ($(this).html()=="") {
$(this).hide();
}
});
});
回答by Thew
replace display:block;by display: none;
替换display:block;为display: none;
edit: Oh, i saw you wanted to use jQuery, then use .hide(): http://api.jquery.com/hide/
编辑：哦，我看到你想使用 jQuery，然后使用 .hide()：http: //api.jquery.com/hide/
回答by samjco
$('div.section:empty').css("display", "none");
回答by Jussi Palo
I used the filtering answer, but this.childNodes.length kept returning 1 also when there was no visible content, so ended up combining filter with trim.
我使用了过滤答案，但是当没有可见内容时 this.childNodes.length 也一直返回 1，因此最终将过滤器与修剪结合起来。
$("div").filter(function() {
return j(this).text().trim() === "";
}).hide();
