Come posso verificare se un elemento HTML è vuoto usando jQuery?

Sto provando a chiamare una funzione solo se un elemento HTML è vuoto, usando jQuery.

Qualcosa come questo:

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

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

per maggiori informazioni vedi http://api.jquery.com/is/ e http://api.jquery.com/empty-selector/

MODIFICARE:

Come alcuni hanno sottolineato, l’interpretazione del browser di un elemento vuoto può variare. Se si desidera ignorare elementi invisibili come spazi e interruzioni di riga e rendere l’implementazione più coerente, è ansible creare una funzione (o semplicemente utilizzare il codice al suo interno).

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

Puoi anche trasformarlo in un plugin jQuery, ma ti viene l’idea.

Ho scoperto che questo è l’unico modo affidabile (poiché Chrome e FF considerano gli spazi e gli interruzioni di riga come elementi):

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

Lo spazio bianco e le interruzioni di riga sono i problemi principali dell’utilizzo: selettore vuoto. Attenzione, nei CSS la pseudo class vuota si comporta allo stesso modo. Mi piace questo metodo:

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

Sì, lo so, non è jQuery, quindi puoi usare questo:

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

Felice adesso?

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

Se per “vuoto”, intendi senza contenuto HTML,

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

Vuoto come non contiene testo?

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

Nel riprendere, ci sono molte opzioni per scoprire se un elemento è vuoto:

1- Usare html :

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

2- Utilizzo del text :

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

3- L’uso is(':empty') :

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

4- Utilizzo della length

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

In aggiunta, se stai cercando di scoprire se un elemento di input è vuoto puoi usare val :

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

Un’altra opzione che dovrebbe richiedere meno “lavoro” per il browser rispetto a html() o children() :

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

Puoi provare:

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

* Sostituisci gli spazi bianchi, solo incase;)

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

o

 $("element").html() == "" || null 
 if($("#element").html() === "") { } 

Stai cercando jQuery.isEmptyObject() ?

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

Ecco un filtro jQuery basato su 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 } 

prova a usare questo!

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

Prova questo:

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

Le interruzioni di riga sono considerate come il contenuto di elementi in FF.

 

Ex:

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

In IE entrambi i div sono considerati vuoti, in FF e Chrome solo l’ultimo è vuoto.

È ansible utilizzare la soluzione fornita da @qwertymk

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

o

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