如何检查div元素是否为空[重复]答案

【问题标题】：How to check if div element is empty [duplicate]如何检查div元素是否为空[重复]
【发布时间】：2013-01-10 05:44:06
【问题描述】：

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

我有一个这样的空 div：

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

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

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

div 中的元素？

谢谢

【问题讨论】：

【解决方案1】：

使用纯 JavaScript

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

如果你使用 jquery，它可以像这样完成

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

【讨论】：

OP 正在寻找 jQuery。此外，== 是邪恶的。首选===。
document.getElementById('cartContent').html --> undefined，不管实际元素是什么。
!element.hasChildNodes()
注意：如果以编程方式删除内容，element.hasChildNodes() 将不起作用。打电话给xx.innerHTML 或xx.children.length 更可靠，它们有细微的不同！

【解决方案2】：

您可以使用原生 JavaScript：

if document.getElementById('cartContent').innerHTML === "" {

你可以使用.is():

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

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

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

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

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

【讨论】：

如果 div 有时很大，则复制和修剪 HTML 可能会对性能产生不良影响。过去，当我的测试元素为空（仅带有空格的文本节点）或包含大量 HTML 时，我实际上在使用这种方法时遇到了问题。查看我的答案以了解我的建议。
@rsp 同意。与任何 JavaScript 一样，一旦您的数据以各种方式变大，就该开始研究“惰性”数据处理了。但是，在大多数基本应用程序中，这种技术可以正常工作。与往常一样，在设计应用程序时应考虑架构以及数据的大小和类型。
这可能会返回意外结果。 .is(':empty') 可以返回 false，即使实际元素是空的 html。我认为这可能是因为计算了空格和换行符。
@bob 这就是为什么我谈论删除空格并检查内容长度作为替代方案的原因。

【解决方案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 更好，因为上面的代码首先测试被测元素是否有任何子元素，如果有，它会尝试找到第一个非空白字符然后停止，无需读取或变异如果字符串有一个字符不是空格，则返回该字符串。

希望对你有帮助。

【讨论】：

【解决方案4】：

你可以使用is函数

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

或使用长度

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：