如何使用jQuery检查HTML元素是否为空？

我试图使用jQuery仅在HTML元素为空的情况下才调用函数。

类似这样的事情：

if (isEmpty($('#element'))) {
    // do something
}

$（'＃elem'）。text（）。match（/ \ S /）|| alert（'empty'）;

#1 楼

if ($('#element').is(':empty')){
  //do something
}

有关更多信息，请参见http://api.jquery.com/is/和http://api.jquery.com/empty-selector/

编辑：

有人指出，浏览器对一个空元素的解释可能会有所不同。如果您想忽略不可见的元素（例如空格和换行符）并使实现更加一致，则可以创建一个函数（或仅使用其中的代码）。

  function isEmpty( el ){
      return !$.trim(el.html())
  }
  if (isEmpty($('#element'))) {
      // do something
  }

您也可以将其添加到jQuery插件中，但是您知道了。

换行符被视为FF和Chrome中元素的内容。

– Corneliu
2011年7月25日在8:46

@Corneliu是正确的。我在下面发布了一个考虑到这一点的答案。这是我最近的项目感到沮丧的主要原因

–DMTintner
13年8月28日在12:37

这太棒了:-D

– Jasonbradberry
15年3月29日在20:57

HTML注释也被视为内容。

–保罗
15年7月23日在17:52

使用一个函数来完成此操作当然很不错，但是如果您希望它更“嵌入”（并且有点挑战），我建议您操纵jQuery的原型或使用JQ强大的“过滤器”功能...

–TheCuBeMan
16 Mar 9 '16 at 15:52

#2 楼

我发现这是唯一可靠的方法（因为Chrome和FF将空格和换行符视为元素）：

if($.trim($("selector").html())=='')

稍微压缩一点的版本可以利用空字符串的虚假性：if（！$。trim（$（“ selector”）。html（））

–布兰登·贝尔文（Brandon Belvin）
2013年8月8日15:41

我认为他们不认为它们是“元素”，但他们认为它们是节点，这是IMO正确的。您也可以执行if（$（“ selector”）。children（）。length === 0）或if（$（“ selector> *”）。length === 0）。

– Panzi
14年5月13日在18:07

我认为您将“元素”与“节点”混淆了。

–user663031
15年6月2日在20:05

$（“ selector”）。html（）。trim（）===''

–user1156544
17年6月23日在23:33

我不知道为什么，但是这个答案的方法：if（$。trim（$（“ selector”）。html（））==''）工作。 .is（'：empty'）没有！

–泽尔科·米洛拉多维奇（Zeljko Miloradovic）
18年6月8日在17:48

#3 楼

空格和换行符是使用：empty选择器的主要问题。小心，在CSS中：empty伪类的行为方式相同。我喜欢这种方法：

if ($someElement.children().length == 0){
     someAction();
}

我之所以选择以上内容，是因为我的DIV中有HTML注释。

–保罗
15年7月23日在17:53

到目前为止，最优雅的解决方案应该是正确的答案。

–克里斯托弗·布巴赫（Christoffer Bubach）
15年9月22日在22:32

注意$ .children（）不返回文本或注释节点，这意味着此解决方案仅检查元素是否为空。如果仅包含文本或注释的元素不应该被认为是空的，那么您应该使用其他解决方案之一。

– sierrasdetandil
18年1月5日在20:38

选择元素的@sierrasdetandil非常完美。条件也可以是if（！$ el.children（）。length）。

– CPHPython
18-09-18在15:22

#4 楼

!elt.hasChildNodes()

是的，我知道，这不是jQuery，因此您可以使用此代码：

!$(elt)[0].hasChildNodes()

现在快乐吗？

+1我在jQuery过滤器函数内使用了您的方法，因为除非有必要，否则我不想在函数内使用jQuery。

– WynandB
2014年4月30日5:12

如果我认为仅纯空白为

，则此语句将返回false。 jsfiddle.net/ytliuSVN/0pdwLt46

–Penny Liu
18年7月2日在1:17

#5 楼

jQuery.fn.doSomething = function() {
   //return something with 'this'
};

$('selector:empty').doSomething();

大！我喜欢没有if的结构。

– Nikolay Fominyh
2011年7月25日在8:24

完全同意@Nikolay，这对我的具体情况没有用，但我会在以后记住它！

–vitto
2011年7月25日在8:33

好吧，这在您必须应用“ this”时不起作用

– Zeal Murapa
15年2月14日在20:45

除了jQuery元素@ZealMurapa之外，这还有什么？

– AlienWebguy
15年2月14日在23:42

#6 楼

如果用“空”表示没有HTML内容，

if($('#element').html() == "") {
  //call function
}

小心，空格和换行符可能导致html并非==''，但元素仍为空。在下面查看我的答案以获取其他解决方案

–DMTintner
13年8月28日在12:36

#7 楼

if (!$('#element').text().length) {
    ...
}

是否为空？

这不会解决内容为图像的元素（不要问我是怎么想的...）

–错误请求
16年3月3日在16:47

@BadRequest否，因此“ as in中不包含任何文本？”之后的问号？ :)

– jensgram
17年4月19日在17:16

#8 楼

在履历表中，有许多选项可找出元素是否为空：

1-使用html：

if (!$.trim($('p#element').html())) {
    // paragraph with id="element" is empty, your code goes here
}

2-使用text ：

if (!$.trim($('p#element').text())) {
    // paragraph with id="element" is empty, your code goes here
}

3-使用is(':empty')：

if ($('p#element').is(':empty')) {
    // paragraph with id="element" is empty, your code goes here
}

4-使用length

if (!$('p#element').length){
    // paragraph with id="element" is empty, your code goes here
}

如果您想了解输入元素是否为空，可以使用val：

if (!$.trim($('input#element').val())) {
    // input with id="element" is empty, your code goes here
}

#9 楼

与html()或children()相比，浏览器需要较少“工作”的另一种选择：

function isEmpty( el ){
  return !el.has('*').length;
}

#10 楼

您可以尝试：

if($('selector').html().toString().replace(/ /g,'') == "") {
//code here
}

*替换空格，以防万一;）

/ [\ S] /。test（$（'Selector'）。html（））不能更好地工作，一旦找到空白，您就知道它不为空

– qwertymk
2011年7月25日在8:44

为什么在正则表达式标志中使用/ i？有空格字符的大小写吗？

– Alexis Wilke
2014年3月26日下午3:45

谢谢，更新了我的答案。我不知道为什么要添加/ i

– Marc Uberstein
2014年3月26日在8:47

@RobertMallow，也许正则表达式支持\ S，但是Unicode将空格定义为Cc，Zs，Zl，Zp，如下所示：unicode.org/Public/UNIDATA/PropList.txt-大写为Lu ...

– Alexis Wilke
2014年11月7日23:57

@RobertMallow，也可以是产生的CharacterClassEscape :: S通过返回所有不包含在CharacterClassEscape :: s返回的字符集中的字符集来进行评估。来自ecma-international.org/ecma-262/5.1/#sec-15.10.2.12

– Alexis Wilke
2014年11月8日，0：13

#11 楼

document.getElementById("id").innerHTML == "" || null

或

$("element").html() == "" || null

#12 楼

if($("#element").html() === "")
{

}

#13 楼

您是否正在寻找jQuery.isEmptyObject()？

http://api.jquery.com/jquery.isemptyobject/

这个问题是关于空的DOM元素，而不是关于空的JavaScript对象。

– Robert Tupelo-Schneck
15年5月26日在14:31

#14 楼

这是一个基于https://stackoverflow.com/a/6813294/698289的jQuery过滤器

$.extend($.expr[':'], {
  trimmedEmpty: function(el) {
    return !$.trim($(el).html());
  }
});

#15 楼

JavaScript

var el= document.querySelector('body'); 
console.log(el);
console.log('Empty : '+ isEmptyTag(el));
console.log('Having Children : '+ hasChildren(el));


function isEmptyTag(tag) { 
    return (tag.innerHTML.trim() === '') ? true : false ;
}
function hasChildren(tag) {
    //return (tag.childElementCount !== 0) ? true : false ; // Not For IE
    //return (tag.childNodes.length !== 0) ? true : false ; // Including Comments
    return (tag.children.length !== 0) ? true : false ; // Only Elements
}

尝试使用其中任何一个！

document.getElementsByTagName('div')[0];
document.getElementsByClassName('topbar')[0];

document.querySelectorAll('div')[0];
document.querySelector('div'); // gets the first element.

#16 楼

试试这个：

if (!$('#el').html()) {
    ...
}

#17 楼

换行符被视为FF中元素的内容。

<div>
</div>
<div></div>

例如：

$("div:empty").text("Empty").css('background', '#ff0000');

在IE中都div被认为是空的，在FF Chrome中，只有最后一个是空的。

您可以使用@qwertymk提供的解决方案

if(!/[\S]/.test($('#element').html())) { // for one element
    alert('empty');
}

或

$('.elements').each(function(){  // for many elements
    if(!/[\S]/.test($(this).html())) { 
        // is empty
    }
})

编程黑洞网