Làm cách nào để kiểm tra xem một phần tử HTML có trống không khi sử dụng jQuery?

Tôi đang cố gắng gọi một hàm chỉ khi một phần tử HTML trống, sử dụng jQuery.

Một cái gì đó như thế này:

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

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

để biết thêm thông tin, hãy xem http://api.jquery.com/is/ và http://api.jquery.com/empty-selector/

BIÊN TẬP:

Như một số người đã chỉ ra, việc giải thích trình duyệt của một yếu tố trống có thể khác nhau. Nếu bạn muốn bỏ qua các phần tử vô hình như dấu cách và dấu ngắt dòng và làm cho việc triển khai trở nên nhất quán hơn, bạn có thể tạo một hàm (hoặc chỉ sử dụng mã bên trong nó).

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

Bạn cũng có thể biến nó thành một plugin jQuery, nhưng bạn có ý tưởng.

Tôi thấy đây là cách đáng tin cậy duy nhất (vì Chrome & FF coi khoảng trắng và ngắt dòng là các yếu tố):

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

Khoảng trắng và ngắt dòng là các vấn đề chính khi sử dụng: bộ chọn trống. Cẩn thận, trong CSS, lớp giả rỗng hoạt động theo cùng một cách. Tôi thích phương pháp này:

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

!elt.hasChildNodes()

Vâng, tôi biết, đây không phải là jQuery, vì vậy bạn có thể sử dụng cái này:

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

Đang hạnh phúc?

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

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

Nếu "trống", bạn có nghĩa là không có nội dung HTML,

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

Trống rỗng như trong không chứa văn bản?

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

Trong sơ yếu lý lịch, có nhiều tùy chọn để tìm hiểu xem một phần tử có trống không:

1- Sử dụng html:

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

2- Sử dụng text:

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

3- Sử dụng is(':empty'):

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

4- Sử dụng length

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

Trong nghiện nếu bạn đang cố gắng tìm hiểu xem một yếu tố đầu vào có trống không, bạn có thể sử dụng val:

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

Một tùy chọn khác cần ít "công việc" hơn cho trình duyệt hơn html()hoặc children():

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

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

hoặc là

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

Bạn co thể thử:

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

* Thay thế khoảng trắng, chỉ cần incase;)

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

}

Bạn đang tìm kiếm jQuery.isEmptyObject()?

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

Đây là bộ lọc jQuery dựa trên https://stackoverflow.com/a/6813294/698289

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

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
}

Hãy thử sử dụng bất kỳ thứ này!

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

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

Thử cái này:

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

Ngắt dòng được coi là nội dung cho các yếu tố trong FF.

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

Ví dụ:

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

Trong IE cả hai div đều được coi là trống, trong FF chỉ có Chrome cuối cùng là trống.

Bạn có thể sử dụng giải pháp được cung cấp bởi @qwertymk

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

hoặc là

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