如何检查div元素是否为空

可能重复：
使用jQuery检查html元素是否为空

我有一个像这样的空div：

我需要检查它是否为空。 如果它是空的，则需要返回true，然后返回一些

元素被添加。 如果不是，则返回false并执行其他一些function。 什么是检查是否有的最佳方法

div中的元素？

谢谢

Answer 1

你可以使用.is() 。

 if( $('#leftmenu').is(':empty') ) { 

或者您可以测试length属性以查看是否找到了一个：

 if( $('#leftmenu:empty').length ) { 

您可以使用$.trim()删除空格（如果这是您想要的）并检查内容的长度。

 if( !$.trim( $('#leftmenu').html() ).length ) { 

Answer 2

使用普通的JavaScript

  var isEmpty = document.getElementById('cartContent').innerHTML === ""; 

如果你正在使用jquery，可以这样做

  var isEmpty = $("#cartContent").html() === ""; 

Answer 3

像其他人已经注意到的那样，你可以在jQuery中使用:empty如下：

 $('#cartContent:empty').remove(); 

如果它为空，它将删除#cartContent div。

但是人们在这里提出的这个和其他技术可能不会做你想要的，因为如果它有任何包含空格的文本节点，它就不会被认为是空的。 所以这不是空的：

虽然你可能想把它视为空。

我前段时间遇到过这个问题而且我写了这个小小的jQuery插件 – 只需将它添加到你的代码中：

 jQuery.expr[':'].space = function(elem) { var $elem = jQuery(elem); return !$elem.children().length && !$elem.text().match(/\S/); } 

现在你可以使用了

 $('#cartContent:space').remove(); 

如果它是空的或只包含空格，它将删除div。 当然，你不仅可以删除它，还可以做任何你喜欢的事情，比如

 $('#cartContent:space').append('
It is empty
'); 

你可以使用:not这样的：

 $('#cartContent:not(:space)').append('
It is not empty
'); 

我出来了这个测试，可靠地做了我想要的，你可以把它从插件中取出来作为一个独立的测试使用它：

这个适用于jQuery对象：

 function testEmpty($elem) { return !$elem.children().length && !$elem.text().match(/\S/); } 

这个适用于DOM节点：

 function testEmpty(elem) { var $elem = jQuery(elem); return !$elem.children().length && !$elem.text().match(/\S/); } 

这比使用.trim更好，因为上面的代码首先测试被测元素是否有任何子元素，如果是，它会尝试找到第一个非空格字符然后停止，而不需要读取或改变字符串，如果它甚至有一个字符不是空格。

希望能帮助到你。

Answer 4

您可以使用is函数

 if( $('#cartContent').is(':empty') ) { } 

或使用长度

 if( $('#cartContent:empty').length ) { } 

Answer 5

 var empty = $("#cartContent").html().trim().length == 0; 

Answer 6

 if ($("#cartContent").children().length == 0) { // no child }