Javascript 如何检查div元素是否为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14535733/
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
How to check if div element is empty
提问by user208709
Possible Duplicate:
Checking if an html element is empty with jQuery
可能的重复：
使用 jQuery 检查 html 元素是否为空
I have an empty div like this:
我有一个像这样的空 div：
<div id="cartContent"></div>
I need to check if it's empty. If it's empty it needs to return true and then some
我需要检查它是否为空。如果它是空的，它需要返回 true 然后一些
elements are added. If not it returns false and some other function executes. What's the best way to check if there are any
添加元素。如果不是，则返回 false 并执行其他一些函数。检查是否存在的最佳方法是什么
elements in the div?
div中的元素？
Thanks
谢谢
回答by dopeddude
Using plain javascript
使用普通的 javascript
var isEmpty = document.getElementById('cartContent').innerHTML === "";
And if you are using jquery it can be done like
如果你使用 jquery，它可以像
var isEmpty = $("#cartContent").html() === "";
回答by Ian Atkin
You can use .is().
您可以使用.is().
if( $('#leftmenu').is(':empty') ) {
Or you could just test the lengthproperty to see if one was found:
或者您可以测试该length属性以查看是否找到了：
if( $('#leftmenu:empty').length ) {
You can use $.trim()to remove whitespace (if that's what you want) and check for the length of the content.
您可以使用$.trim()删除空格（如果这是您想要的）并检查内容的长度。
if( !$.trim( $('#leftmenu').html() ).length ) {
回答by rsp
Like others have already noted, you can use :emptyin jQuery like this:
就像其他人已经指出的那样，您可以:empty像这样在 jQuery 中使用：
$('#cartContent:empty').remove();
It will remove the #cartContentdiv if it is empty.
#cartContent如果它是空的，它将删除div。
But this and other techniques that people are suggesting here may not do what you want because if it has any text nodes containing whitespace it is not considered empty. So this is not empty:
但是人们在这里建议的这种技术和其他技术可能不会做你想要的，因为如果它有任何包含空格的文本节点，它就不会被认为是空的。所以这不是空的：
<div> </div>
while you may want to consider it empty.
虽然您可能想将其视为空。
I had this problem some time ago and I wrote this tiny jQuery plugin - just add it to your code:
前段时间我遇到了这个问题，我写了这个小小的 jQuery 插件 - 只需将它添加到您的代码中：
jQuery.expr[':'].space = function(elem) {
var $elem = jQuery(elem);
return !$elem.children().length && !$elem.text().match(/\S/);
}
and now you can use
现在你可以使用
$('#cartContent:space').remove();
which will remove the div if it is empty or contains only whitespace. Of course you can not only remove it but do anything you like, like
如果 div 为空或仅包含空格，它将删除 div。当然，你不仅可以删除它，还可以做任何你喜欢的事情，比如
$('#cartContent:space').append('<p>It is empty</p>');
and you can use :notlike this:
你可以这样使用:not：
$('#cartContent:not(:space)').append('<p>It is not empty</p>');
I came out with this test that reliably did what I wanted and you can take it out of the plugin to use it as a standalone test:
我提出了这个测试，它可靠地完成了我想要的事情，您可以将其从插件中取出以将其用作独立测试：
This one will work for jQuery objects:
这将适用于 jQuery 对象：
function testEmpty($elem) {
return !$elem.children().length && !$elem.text().match(/\S/);
}
This one will work for DOM nodes:
这将适用于 DOM 节点：
function testEmpty(elem) {
var $elem = jQuery(elem);
return !$elem.children().length && !$elem.text().match(/\S/);
}
This is better than using .trimbecause the above code first tests if the tested element has any child elements and if it does it tries to find the first non-whitespace character and then stops, without the need to read or mutate the string if it has even one character that is not whitespace.
这比 using 更好，.trim因为上面的代码首先测试被测试元素是否有任何子元素，如果有，它会尝试找到第一个非空白字符然后停止，如果它有，则不需要读取或改变字符串一个不是空格的字符。
Hope it helps.
希望能帮助到你。
回答by muthu
You can use the is function
您可以使用 is 函数
if( $('#cartContent').is(':empty') ) { }
or use the length
或使用长度
if( $('#cartContent:empty').length ) { }
回答by Kevin Bowersox
var empty = $("#cartContent").html().trim().length == 0;
回答by Iswanto San
if ($("#cartContent").children().length == 0)
{
// no child
}
