Bagaimana cara memeriksa apakah elemen HTML kosong menggunakan jQuery?

Saya mencoba memanggil fungsi hanya jika elemen HTML kosong, menggunakan jQuery.

Sesuatu seperti ini:

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

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

untuk info lebih lanjut lihat http://api.jquery.com/is/ dan http://api.jquery.com/empty-selector/

EDIT:

Seperti yang telah ditunjukkan beberapa orang, interpretasi browser dari elemen kosong dapat bervariasi. Jika Anda ingin mengabaikan elemen yang tidak terlihat seperti spasi dan jeda baris dan membuat implementasi lebih konsisten Anda dapat membuat fungsi (atau cukup gunakan kode di dalamnya).

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

Anda juga bisa membuatnya menjadi plugin jQuery, tetapi Anda mendapatkan idenya.

Saya menemukan ini sebagai satu-satunya cara yang dapat diandalkan (karena Chrome & FF menganggap spasi putih dan linebreak sebagai elemen):

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

Ruang putih dan jeda baris adalah masalah utama dalam menggunakan: selector kosong. Hati-hati, dalam CSS, kelas pseudo kosong berperilaku dengan cara yang sama. Saya suka metode ini:

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

!elt.hasChildNodes()

Ya, saya tahu, ini bukan jQuery, jadi Anda bisa menggunakan ini:

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

Bahagia sekarang?

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

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

Jika dengan "kosong", maksud Anda tanpa konten HTML,

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

Kosong seperti di tidak mengandung teks?

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

Dalam resume, ada banyak opsi untuk mengetahui apakah suatu elemen kosong:

1- Menggunakan html:

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

2- Menggunakan text:

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

3 - Menggunakan is(':empty'):

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

4- Menggunakan length

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

Dalam kecanduan jika Anda mencoba mencari tahu apakah elemen input kosong, Anda dapat menggunakan val:

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

Opsi lain yang harus lebih sedikit "berfungsi" untuk browser daripada html()atau children():

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

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

atau

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

Anda dapat mencoba:

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

* Ganti ruang putih, cukup memetikan;)

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

}

Apakah Anda mencari jQuery.isEmptyObject()?

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

Berikut ini adalah filter jQuery berdasarkan 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
}

coba gunakan semua ini!

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

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

Coba ini:

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

Jeda baris dianggap sebagai konten untuk elemen dalam FF.

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

Ex:

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

Di IE kedua div dianggap kosong, di FF an Chrome hanya yang terakhir kosong.

Anda dapat menggunakan solusi yang disediakan oleh @qwertymk

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

atau

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