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

Question

我正在尝试仅在HTML元素为空时使用jQuery调用函数.

像这样的东西:

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

Answer 1

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

编辑:

正如一些人所指出的那样,浏览器对空元素的解释可能会有所不同.如果您想忽略空格和换行符等不可见元素并使实现更加一致,您可以创建一个函数(或者只使用它内部的代码).

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

你也可以把它变成一个jQuery插件,但你明白了.

Answer 2

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

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

稍微压缩一点的版本可以利用空字符串的假性:`if(!$.trim($("selector").html())` (18认同)
我不认为他们认为它们是"元素",但他们认为它们是节点,这是IMO正确的.你也可以做`if($("selector").children().length === 0)`或`if($("selector>*").length === 0)`. (11认同)
$("选择器").html().trim() === '' (3认同)

Answer 3

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

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

请注意,`$ .children()`不返回文本或注释节点,这意味着此解决方案仅检查_elements_元素是否为空.如果仅包含文本或注释的元素不应被视为满足您的需求,那么您应该使用其他解决方案之一. (6认同)
我选择了上面的内容,因为我的DIV中有HTML注释. (4认同)
到目前为止最优雅的解决方案,应该是正确答案. (2认同)

Answer 4

!elt.hasChildNodes()

是的,我知道,这不是jQuery,所以你可以使用这个:

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

现在开心？

Answer 5

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

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

Answer 6

如果是"空",则表示没有HTML内容,

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

Answer 7

空如在包含没有文字？

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

Answer 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
}