Comment puis-je vérifier si un élément HTML est vide en utilisant jQuery?
J'essaie d'appeler une fonction uniquement si un élément HTML est vide, en utilisant jQuery.
Quelque Chose comme ceci:
if (isEmpty($('#element'))) {
// do something
}
17 réponses
if ($('#element').is(':empty')){
//do something
}
Pour plus d'infos, voir http://api.jquery.com/is/ et http://api.jquery.com/empty-selector/
Modifier:
Comme certains l'ont souligné, l'interprétation du navigateur d'un élément vide peut varier. Si vous souhaitez ignorer les éléments invisibles tels que les espaces et les sauts de ligne et rendre l'implémentation plus cohérente, vous pouvez créer une fonction (ou simplement utiliser le code à l'intérieur).
function isEmpty( el ){
return !$.trim(el.html())
}
if (isEmpty($('#element'))) {
// do something
}
Vous pouvez également en faire un plugin jQuery, mais vous obtenez idée.
J'ai trouvé que c'était le seul moyen fiable (puisque Chrome & FF considère les espaces blancs et les sauts de ligne comme des éléments):
if($.trim($("selector").html())=='')
Les espaces blancs et les sauts de ligne sont les principaux problèmes avec l'utilisation de: sélecteur vide. Attention, en CSS, La pseudo-classe: empty se comporte de la même manière. J'aime cette méthode:
if ($someElement.children().length == 0){
someAction();
}
jQuery.fn.doSomething = function() {
//return something with 'this'
};
$('selector:empty').doSomething();
Si par "vide", vous voulez dire sans contenu HTML,
if($('#element').html() == "") {
//call function
}
Vide comme dans ne contient pas de texte?
if (!$('#element').text().length) {
...
}
Dans resume, il y a beaucoup d'options pour savoir si un élément est vide:
1-en utilisant html:
if (!$.trim($('p#element').html())) {
// paragraph with id="element" is empty, your code goes here
}
2-en utilisant text:
if (!$.trim($('p#element').text())) {
// paragraph with id="element" is empty, your code goes here
}
3-en utilisant is(':empty'):
if ($('p#element').is(':empty')) {
// paragraph with id="element" is empty, your code goes here
}
4-en utilisant length
if (!$('p#element').length){
// paragraph with id="element" is empty, your code goes here
}
Dans la dépendance, si vous cherchez à savoir si un élément d'entrée est vide, vous pouvez utiliser val:
if (!$.trim($('input#element').val())) {
// input with id="element" is empty, your code goes here
}
Une Autre option qui devrait nécessiter moins de "travail" pour le navigateur que html() ou children():
function isEmpty( el ){
return !el.has('*').length;
}
, Vous pouvez essayer:
if($('selector').html().toString().replace(/ /g,'') == "") {
//code here
}
* Remplacer les espaces blancs, juste en cas ;)
document.getElementById("id").innerHTML == "" || null
Ou
$("element").html() == "" || null
Voici un filtre jQuery basé sur 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
}
Essayez d'utiliser tout cela!
document.getElementsByTagName('div')[0];
document.getElementsByClassName('topbar')[0];
document.querySelectorAll('div')[0];
document.querySelector('div'); // gets the first element.
Les sauts de ligne sont considérés comme du contenu d'éléments dans FF.
<div>
</div>
<div></div>
Ex:
$("div:empty").text("Empty").css('background', '#ff0000');
Dans IE les deux divs sont considérés comme vides, dans FF un Chrome seul le dernier est vide.
Vous pouvez utiliser la solution fournie par @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
}
})