如何检查div元素是否为空

Question

  

可能重复：
  Checking if an html element is empty with jQuery

我有一个像这样的空div：

<div id="cartContent"></div>

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

元素。如果不是，则返回false并执行其他一些功能。检查div中是否有任何

元素的最佳方法是什么？

由于

Answer 1

使用普通的javascript

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

如果您使用的是jquery，可以像

那样完成

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

Answer 2

您可以使用.is()。

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

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

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

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

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

Answer 3

与其他人已经注意到的一样，您可以在jQuery中使用:empty，如下所示：

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

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

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

<div> </div>

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

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

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

现在你可以使用

了

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

如果div为空或仅包含空格，则会删除div。当然，您不仅可以删除它，还可以执行任何您喜欢的操作，例如

$('#cartContent:space').append('<p>It is empty</p>');

你可以像这样使用:not：

$('#cartContent:not(:space)').append('<p>It is not empty</p>');

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

这个适用于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
}