jQuery 如果 div 有内容显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3893440/
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
if div has content show div
提问by Alex
ok heres what i have... it works fine but it looks for a word rather than content. i just want it to show when there is any content..
确定继承人什么我有...它工作正常，但它寻找一个词而不是内容。我只是想让它在有任何内容时显示..
$(document).ready(function(){
if ($("#box3:contains('Product')").length) {
$('#third').show();
}
});
i dont think you need the html for this
我不认为你需要这个 html
it looks for 'Product' how do i make it just look for content >0
它寻找“产品”我如何让它只寻找内容 >0
<div id="first" class="tab" >
<div class="tabtxt">
<a>DETAILS</a>
</div>
</div>
<div class="tab" id="second">
<div class="tabtxt">
<a>INSPIRATION</a>
</div>
</div>
<div class="tab" id="third" style="display:none">
<div class="tabtxt">
<a>NOTES</a>
</div>
</div>
<div class="boxholder">
<div style="overflow: hidden; display:block" class="box" id="box1">
<div style="padding: 10px; line-height:16px">
%%Panel.ProductDescription%%
</div>
</div>
<div style="overflow: hidden; display:none" class="box" id="box2">
<div style="padding: 10px; line-height:16px">
%%Panel.ProductWarranty%%
</div>
</div>
<div style="overflow: hidden; display:none" class="box" id="box3">
<div style="padding: 10px; line-height:16px">
%%Panel.UPC%%
</div>
</div>
</div>
its an interspire shopping cart so the %%panel.upc%% calls in something inserted through the admin panel. in this case if there is nothing.. it shows as blank space in the code (viewing source in browser).
它是一个 interspire 购物车，因此 %%panel.upc%% 调用通过管理面板插入的内容。在这种情况下，如果什么都没有……它在代码中显示为空格（在浏览器中查看源代码）。
回答by Sarfraz
If you want to check for text, you can use the text()method:
如果要检查text，可以使用以下text()方法：
$(document).ready(function(){
if ($("#box3").text().length > 0) {
$('#third').show();
}
});
Or for html:
或者对于 html：
$(document).ready(function(){
if ($("#box3").html().length > 0) {
$('#third').show();
}
});
回答by Nick Craver
For the updated question:Check the trimmed text of the inner <div>, like this:
对于更新的问题：检查内部的修剪文本<div>，如下所示：
if ($.trim($("#box3 div").html())) {
$('#third').show();
}
Previous answer:If you want to show if it has anything, then checking :not()against :emptyworks:
前面的回答：如果你想显示如果有什么，然后检查:not()对:empty作品：
if ($("#box3:not(:empty)").length) {
$('#third').show();
}
If you want to check for any elements (not possibly whitespace only), then use :has(*), like this:
如果要检查任何元素（可能不只是空格），请使用:has(*)，如下所示：
if ($("#box3:has(*)").length) {
$('#third').show();
}
回答by KKumar
You can also use the CSS3 selector :empty
您还可以使用 CSS3 选择器 :empty
div#empty-div:empty {
display: none;
}
The :emptyselector is only targeting just empty elements, without white space.
该:empty选择仅定位到刚刚空元素，没有空白。
回答by Wasim Khan
Trim can be used to check the length
Trim 可用于检查长度
$(document).ready(function(){
if ($("#box3").html().trim().length > 0) {
$('#third').show();
}
});
回答by swilliams
You can also check for the HTML's length inside your selector:
您还可以在选择器中检查 HTML 的长度：
if ($("#box3").html().length) {
$('#third').show();
}
