Respostas:
if ($('#element').is(':empty')){
//do something
}
para obter mais informações, consulte http://api.jquery.com/is/ e http://api.jquery.com/empty-selector/
EDITAR:
Como alguns apontaram, a interpretação do navegador de um elemento vazio pode variar. Se você deseja ignorar elementos invisíveis, como espaços e quebras de linha, e tornar a implementação mais consistente, é possível criar uma função (ou apenas usar o código dentro dela).
function isEmpty( el ){
return !$.trim(el.html())
}
if (isEmpty($('#element'))) {
// do something
}
Você também pode transformá-lo em um plug-in jQuery, mas você entendeu.
Achei essa a única maneira confiável (já que o Chrome e o FF consideram espaços em branco e quebras de linha como elementos):
if($.trim($("selector").html())=='')
if(!$.trim($("selector").html())
if($("selector").children().length === 0)
ou if($("selector > *").length === 0)
.
Espaço em branco e quebras de linha são os principais problemas do uso de: seletor vazio. Cuidado, em CSS, a pseudo classe: empty se comporta da mesma maneira. Eu gosto deste método:
if ($someElement.children().length == 0){
someAction();
}
$.children()
não retorna nós de texto ou comentário, o que significa que esta solução apenas verifica se o elemento está vazio de elementos . Se um elemento que contém apenas texto ou comentários não deve ser considerado vazio para suas necessidades, você deve usar uma das outras soluções.
select
elementos é perfeito. a condição também pode ser if(! $el.children().length)
.
!elt.hasChildNodes()
Sim, eu sei, isso não é jQuery, então você pode usar isso:
!$(elt)[0].hasChildNodes()
Feliz agora?
filter
função jQuery , pois não queria usar o jQuery dentro da função, a menos que necessário.
<div class="results"> </div>
, esta declaração retornará false. jsfiddle.net/ytliuSVN/0pdwLt46
jQuery.fn.doSomething = function() {
//return something with 'this'
};
$('selector:empty').doSomething();
this
além do elemento jQuery @ZealMurapa?
Se por "vazio", você quer dizer sem conteúdo HTML,
if($('#element').html() == "") {
//call function
}
Vazio como em não contém texto?
if (!$('#element').text().length) {
...
}
Em resumo, existem muitas opções para descobrir se um elemento está vazio:
1- Usando html
:
if (!$.trim($('p#element').html())) {
// paragraph with id="element" is empty, your code goes here
}
2- Usando text
:
if (!$.trim($('p#element').text())) {
// paragraph with id="element" is empty, your code goes here
}
3- Usando is(':empty')
:
if ($('p#element').is(':empty')) {
// paragraph with id="element" is empty, your code goes here
}
4- Usando length
if (!$('p#element').length){
// paragraph with id="element" is empty, your code goes here
}
Além disso, se você está tentando descobrir se um elemento de entrada está vazio, pode usar val
:
if (!$.trim($('input#element').val())) {
// input with id="element" is empty, your code goes here
}
document.getElementById("id").innerHTML == "" || null
ou
$("element").html() == "" || null
Podes tentar:
if($('selector').html().toString().replace(/ /g,'') == "") {
//code here
}
* Substitua espaços em branco, apenas no caso de;)
!/[\S]/.test($('Selector').html())
funcionar melhor, uma vez que você encontrar algum espaço em branco que você sabe que não está vazia
The production CharacterClassEscape :: S evaluates by returning the set of all characters not included in the set returned by CharacterClassEscape :: s.
a partir ecma-international.org/ecma-262/5.1/#sec-15.10.2.12
Você está procurando jQuery.isEmptyObject()
?
Aqui está um filtro jQuery baseado em 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
}
tente usar isso!
document.getElementsByTagName('div')[0];
document.getElementsByClassName('topbar')[0];
document.querySelectorAll('div')[0];
document.querySelector('div'); // gets the first element.
Quebras de linha são consideradas como conteúdo para elementos no FF.
<div>
</div>
<div></div>
Ex:
$("div:empty").text("Empty").css('background', '#ff0000');
No IE, os dois divs são considerados vazios; no FF, no Chrome, apenas o último está vazio.
Você pode usar a solução fornecida por @qwertymk
if(!/[\S]/.test($('#element').html())) { // for one element
alert('empty');
}
ou
$('.elements').each(function(){ // for many elements
if(!/[\S]/.test($(this).html())) {
// is empty
}
})
$('#elem').text().match(/\S/) || alert('empty');