如何检查div元素是否为空

Question

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

我有一个像这样的空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

像其他人已经注意到的那样,你可以:empty在jQuery中使用这样的:

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

它将删除#cartContentdiv,如果它是空的.

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

<div> </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('<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 ) { }