Utiliser une instruction if pour vérifier si un div est vide

J’essaie de supprimer une div spécifique si une div séparée est vide. Voici ce que j’utilise:

$(document).ready(function () { if ('#leftmenu:empty') { $('#menuTitleWrapper').remove(); $('#middlemenu').css({ 'right': '0', 'position': 'absolute' }); $('#PageContent').css({ 'top': '30px', 'position': 'relative' }); } }); 

Je pense que c’est proche mais je ne peux pas comprendre comment écrire le code pour tester #leftmenu est vide. Toute aide est appréciée!

Vous pouvez utiliser .is() .

 if( $('#leftmenu').is(':empty') ) { // ... 

Ou vous pouvez simplement tester la propriété length pour voir si une propriété a été trouvée.

 if( $('#leftmenu:empty').length ) { // ... 

Gardez à l’esprit que vide signifie pas non plus d’espace blanc. S’il y a une chance qu’il y ait des espaces blancs, vous pouvez utiliser $.sortingm() et vérifier la longueur du contenu.

 if( !$.sortingm( $('#leftmenu').html() ).length ) { // ... 

Cela dépend de ce que tu veux dire par vide.

Pour vérifier s’il n’y a pas de texte (cela permet des éléments enfants qui sont vides eux-mêmes):

 if ($('#leftmenu').text() == '') 

Pour vérifier s’il n’y a pas d’éléments enfants ou de texte:

 if ($('#leftmenu').contents().length == 0) 

Ou,

 if ($('#leftmenu').html() == '') 

Si vous voulez une démonstration rapide de la façon dont vous vérifiez les divs vides, je vous suggère d’essayer ce lien:

http://html-tuts.com/check-if-html-element-is-empty-or-has-children-tags/


Vous trouverez ci-dessous quelques exemples:

En utilisant CSS

Si votre div est vide sans rien, même pas d’espace blanc, vous pouvez utiliser CSS:

 .someDiv:empty { display: none; } 

Malheureusement, aucun sélecteur CSS ne sélectionne l’élément frère précédent. Il n’y a que pour le prochain élément frère: x ~ y

 .someDiv:empty ~ .anotherDiv { display: none; } 

Utiliser jQuery

Vérification de la longueur du texte de l’élément avec la fonction text ()

 if ( $('#leftmenu').text().length == 0 ) { // length of text is 0 } 

Vérifiez si l’élément contient des tags enfants à l’intérieur

 if ( $('#leftmenu').children().length == 0 ) { // div has no other tags inside it } 

Rechercher les éléments vides s’ils ont des espaces blancs

 if ( $.sortingm( $('.someDiv').text() ).length == 0 ) { // white-space sortingmmed, div is empty } 

Vous pouvez étendre la fonctionnalité jQuery comme ceci:

Étendre :

 (function($){ jQuery.fn.checkEmpty = function() { return !$.sortingm(this.html()).length; }; }(jQuery)); 

Utilisation :

 
if($("#selector").checkEmpty()){ console.log("Empty"); }else{ console.log("Not Empty"); }

Essaye ça:

 $(document).ready(function() { if ($('#leftmenu').html() === "") { $('#menuTitleWrapper').remove(); $('#middlemenu').css({'right' : '0', 'position' : 'absolute'}); $('#PageContent').css({'top' : '30px', 'position' : 'relative'}); } }); 

Ce n’est pas le plus joli, mais ça devrait marcher. Il vérifie si innerHTML (le contenu de #leftmenu) est une chaîne vide (c.-à-d. Qu’il n’y a rien à l’intérieur).

Dans mon cas, j’avais plusieurs éléments à cacher sur le document. C’est la fonction (filtre) qui a fonctionné pour moi jusqu’à présent:

 $('[name="_invisibleIfEmpty"]').filter(function () { return $.sortingm($(this).html()).length == 0; }).hide(); 

ou .remove () plutôt que .hide (), quoi que vous préfériez.

FYI: Ceci, en particulier, est la solution que j’utilise pour masquer les cellules vides dans SharePoint (en plus de cette condition “|| $ (this) .children (” menu “). Length”.

 if (typeof($('#container .prateleira')[0]) === 'undefined') { $('#ctl00_Conteudo_ctrPaginaSistemaAreaWrapper').css('display','none'); } 

J’ai rencontré ceci aujourd’hui et les réponses acceptées n’ont pas fonctionné pour moi. Voici comment je l’ai fait.

 if( $('#div-id *').length === 0 ) { // your code here... } 

Ma solution vérifie s’il y a des éléments à l’intérieur du div afin de toujours marquer le div vide s’il n’y a que du texte à l’intérieur.

 if($('#leftmenu').val() == "") { // statement }