javascript - 如何检查div元素是否为空

Question

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

我有一个像这样的空 div：

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

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

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

div中的元素？

谢谢

score 54 · Accepted Answer

使用纯 JavaScript

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

如果您使用的是 jquery，则可以这样做

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

score 38 · Accepted Answer

您可以使用本机 JavaScript：

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

您可以使用.is()：

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

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

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

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

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

score 10 · Accepted Answer

就像其他人已经注意到的那样，您可以:empty像这样在 jQuery 中使用：

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

希望能帮助到你。

score 6 · Accepted Answer

您可以使用 is 功能

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

或使用长度

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

score 3 · Accepted Answer

3

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

于 2013-01-26T09:50:17.030 回答

score 1 · Accepted Answer

1

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

于 2013-01-26T09:52:13.020 回答

6 回答 6