Как проверить, пуст ли элемент HTML с помощью jQuery?

Question

Как проверить, пуст ли элемент HTML с помощью jQuery?

Я пытаюсь вызвать функцию, только если элемент HTML пуст, используя jQuery.

что-то вроде этого:

if (isEmpty($('#element'))) {

    // do something

}

910 17

jQuery javascript

17 ответов:

Comments

Ничего не найдено.

Emil · Accepted Answer · 2013-09-11 23:55:53

if ($('#element').is(':empty')){
  //do something
}
для получения дополнительной информации см. http://api.jquery.com/is/ и http://api.jquery.com/empty-selector/

EDIT:

как указывали некоторые, интерпретация пустого элемента в браузере может отличаться. Если вы хотите игнорировать невидимые элементы, такие как пробелы и разрывы строк, и сделать реализацию более последовательной, вы можете создать функцию (или просто использовать код внутри нее).
  function isEmpty( el ){
      return !$.trim(el.html())
  }
  if (isEmpty($('#element'))) {
      // do something
  }
вы также можете сделайте это в плагин jQuery, но вы получите идею.

Serge Shultz · Accepted Answer · 2012-12-24 23:45:13

Я обнаружил, что это единственный надежный способ (поскольку Chrome & FF рассматривает пробелы и разрывы строк как элементы):
if($.trim($("selector").html())=='')

DMTintner · Accepted Answer · 2013-08-28 15:37:38

пробелы и разрывы строк являются основными проблемами при использовании :пустой селектор. Осторожно, в CSS :пустой псевдо-класс ведет себя так же. Мне нравится этот метод:
if ($someElement.children().length == 0){
     someAction();
}

score 23 · Accepted Answer · 2013-01-26 14:20:23

!elt.hasChildNodes()
Да, я знаю, это не jQuery, так что вы могли бы использовать это:
!$(elt)[0].hasChildNodes()
теперь счастлив?

AlienWebguy · Accepted Answer · 2011-07-25 11:10:52

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

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

Digital Plane · Accepted Answer · 2011-07-25 11:06:27

Если под "пустым" вы подразумеваете без содержимого HTML,
if($('#element').html() == "") {
  //call function
}

jensgram · Accepted Answer · 2011-07-25 11:07:16

пустой, как в не содержит текста?
if (!$('#element').text().length) {
    ...
}

RuiVBoas · Accepted Answer · 2018-01-05 17:17:15

в резюме есть много вариантов, чтобы узнать, если элемент пуст:

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
}
в зависимости, если вы пытаетесь выяснить, если элемент input пуст, вы можете использовать val:
if (!$.trim($('input#element').val())) {
    // input with id="element" is empty, your code goes here
}

dahlbyk · Accepted Answer · 2015-07-28 14:59:40

еще один вариант, который должен требовать меньше "работы" для браузера, чем html() или children():
function isEmpty( el ){
  return !el.has('*').length;
}

Marc Uberstein · Accepted Answer · 2014-03-26 10:46:07

можно попробовать:
if($('selector').html().toString().replace(/ /g,'') == "") {
//code here
}
*заменить пробелы, просто Incase ;)

MayorMonty · Accepted Answer · 2015-09-30 07:41:31

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

или

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

Alex · Accepted Answer · 2011-07-25 11:07:03

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

}

-1

2011-07-25 11:07:03

Zubair1 · Accepted Answer · 2014-08-13 14:29:20

ищите jQuery.isEmptyObject() ?

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

DanH · Accepted Answer · 2017-05-23 14:47:29

вот фильтр jQuery на основе https://stackoverflow.com/a/6813294/698289
$.extend($.expr[':'], {
  trimmedEmpty: function(el) {
    return !$.trim($(el).html());
  }
});

Yash · Accepted Answer · 2015-12-18 08:53:35

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.

Syed · Accepted Answer · 2017-01-19 12:38:08

попробуйте это:
if (!$('#el').html()) {
    ...
}

Corneliu · Accepted Answer · 2011-07-25 12:04:16

разрывы строк рассматриваются как содержимое элементов в FF.
<div>
</div>
<div></div>
Ex:
$("div:empty").text("Empty").css('background', '#ff0000');
в IE оба дива считаются пустыми,в 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
    }
})