如何检查div元素是否为空

Question

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

我有一个空的div，像这样：

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

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

元素。如果不是，则返回false并执行其他一些函数。最好的方法是如何检查

中是否有任何

元素？

谢谢。

- user208709

---

jQuery的:empty选择器 - Ohgodwhy

我不同意将这个标记为重复。这个问题是关于在JavaScript中确定空元素，而不是jQuery。有许多用例在这种微妙的差别上非常重要。 - newshorts

并非所有项目都可以使用jQuery，而且问题并没有特别提到jQuery。即使以重复的方式回答，这也不是重复的问题。 - user1816910

我猜这个标签是“jquery”，所以也许原帖的确是想问重复的问题。 - augurar

我同意这个观点，这不是一个重复的问题。另一篇帖子明确要求使用jQuery解决方案，并且只提供了jQuery解决方案。在关闭帖子之前，请仔细阅读问题描述。 - Eight Lives

Answer 1

使用纯JavaScript

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

如果您正在使用jQuery，可以这样做

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

- dopeddude

---

OP正在寻找jQuery。此外，“==”是有害的，建议使用“===”。 - Ian Atkin

document.getElementById('cartContent').html --> 无定义，无论实际元素是什么。 - Teemu

!element.hasChildNodes() - user663031

注意：如果内容是程序性地删除的，element.hasChildNodes（）无法正常工作。更可靠的方法是调用 xx.innerHTML 或 xx.children.length，它们略有不同！ - John Henckel

Answer 2

您可以使用本地JavaScript：

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

您可以使用 .is() 方法：

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

或者你可以测试length属性，以查看是否找到了一个:

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

您可以使用$.trim()来去除空格（如果需要）并检查内容的长度：

您可以使用$.trim()来去除空格（如果需要）并检查内容的长度：

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

- Ian Atkin

---

复制和修剪HTML可能会对性能产生不良影响，如果该div有时可能非常巨大。实际上，我过去在测试元素为空（只有空格的文本节点）或包含大量HTML时，使用这种方法遇到了问题。请查看我的答案以了解我推荐什么。 - rsp

@rsp 同意。就像任何 JavaScript 一样，一旦你的数据在各种方面变得庞大，就是时候开始考虑“惰性”数据处理了。然而，在大多数基本应用程序中，这种技术都能很好地工作。设计应用程序时，始终要考虑架构、数据的大小和类型。 - Ian Atkin

这可能会返回意外的结果。即使实际元素为空，.is(':empty')也可能返回false。我认为这可能是因为空格和换行符被计算在内。 - bob

@bob，这就是为什么我提到删除空格并检查内容长度作为替代方案的原因。 - Ian Atkin

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 元素为空或仅包含空格，则会将其移除。当然，你不仅可以将其移除，还可以进行任何你想做的事情，比如

$('#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更好，因为上面的代码首先测试被测试元素是否有任何子元素，如果有，则尝试查找第一个非空白字符，然后停止，无需读取或改变字符串，即使它具有一个非空格字符。

希望这有所帮助。

- rsp

Answer 4

您可以使用is函数。

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

或者使用长度

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

- muthu

---

这段代码if( $('#cartContent').length)是错误的，应该使用if( $('#cartContent:empty').length )来判断#cartContent元素是否为空。 - YogeshWaran

请将以下与编程有关的内容从英语翻译成中文。只需翻译文本内容，不要进行任何解释或更改。 - YogeshWaran

感谢Yogesh的更正。 - muthu

Answer 5

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

- Kevin Bowersox

---

请查看：http://jsbin.com/utemeq/1/edit。您需要先修剪字符串... - elclanrs

@elclanrs 更新了修剪空格的功能。 - Kevin Bowersox

Answer 6

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

- Iswanto San

---

OP并不是在寻找儿童，只是零内容。 - Ian Atkin