Masquer div s'ils sont vides

J'ai des div qui peut être vide (selon une logique côté serveur).

<div id="bar">

<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>

</div>

S'ils n'ont pas de code html à l'intérieur de la div (avec section de classe), j'ai juste envie de les cacher.

Comment puis-je faire cela?

source d'informationauteur Blankman

jquery

41

jQuery a une vide sélecteur. Ainsi, vous pouvez tout simplement faire:
```
$('div.section:empty').hide();
```
15

Ici est un CSS3 solution pour toute personne qui est intéressé
```
div:empty {
  display:none;
}
```
4

Pourquoi personne ne l'utiliser .filtre ?
```
$("div.section").filter(function() {
    return this.childNodes.length === 0;
}).hide();
```
C'est une solution plus élégante par rapport à l'utilisation .each.

Si div contient des espaces ou des sauts de ligne, ce code peut être utile...

$(document).ready(function() {
   str = $('div.section').text();
   if($.trim(str) === "") {
     $('div.section').hide();
   }
});

2

Il existe de nombreuses options, tout dépend de vos préférences.
Le plus compact de la réponse la moins lisible, il devient, est la vitesse important, et comment efficace si la fonction vide, un élément contenant pas de nœuds n'est pas la même chose qu'un :empty élément.

Plus compact /Lent /Très Efficace /lisible /sélecteur générique
```
$('.section:empty').hide();
```
Très compact /petit peu plus vite (Lent) /Très Efficace /lisible /moins générique sélecteur de
```
$('div.section:empty').hide();
```
Compact /plus Rapide /Efficace /lisible /sélecteur de
```
$("#bar").find('div.section:empty').hide(); 
```
Je vais rester avec le plus précis sélecteur car il est plus rapide.

Moins Compact /Encore plus Rapide /Très Efficace et encore moins lisible
```
$("#bar").find('div.section').filter(function(i,elem) {

    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeType < 6 ) {
            return false;
        }
    }
    return true;

}).hide();
```
Encore Moins Compact /Même Encore plus Rapide /Très Efficace et encore moins lisible
```
$("#bar").find('div.section').each(function(i,elem){

    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeType < 6 ) {
            return;
        }
    }
    $(this).hide();        
})
```
Compact-ish /Beaucoup plus Rapide /Moins Efficace /moins lisible
```
//Faster Still but less precise
$("#bar").find('div.section').filter(function() {
    return !this.firstChild; 
}).hide();
```
Moins Compact /Beaucoup plus Rapide /Moins Efficace /moins lisible
```
$("#bar").find('div.section').each(function(){
    if(!this.firstChild){
        $(this).hide();            
    }           
})
```
Solution Efficace

Les Solutions les plus Efficaces d'utiliser la même méthode que celle utilisée par le "vide" jquery filtre, il tente de reproduire les fonctionnalités de CSS3 :empty pseudo-classe en tenant compte de la nodeType.
Par exemple, si un élément enfant avait nodeType == COMMENT_NODE() de la société mère sera toujours considéré comme vide.

Toutes ces Approches pourrait être améliorée en remplaçant le .hide() avec .addClass('hide') et l'ajout d'un .hide classe CSS.
```
<style>
    .hide {
        display:none;
    }
</style>
```
mais si cela sonne comme une solution appropriée pour vous, alors @elliot-bois 's CSS3 Répondre est probablement mieux adapté.

Ma préférence personnelle
```
$("#bar").find('div.section').filter(function() {
    return !this.firstChild; 
}).hide();
```
Même si cette approche ne vérifie pas nodeType et il utilise .filter() méthode plutôt que le plus rapide .each(). C'est juste un plus compact et plus lisible solution.
1
```
$('div').each(function() {
if($(this).html().size() == 0) $(this).remove();
});
```
Si vous souhaitez utiliser des divs plus tard dans la même page, il est préférable d'utiliser $(this).hide(); au lieu de $(this).remove(); que les divs seront supprimées si vous utilisez remove();

Avez-vous accès à un serveur logique?

Autre côté client que vous pourriez faire quelque chose comme:

$(function() {
$('div').each(function() {
       if ($(this).html()=="") {
             $(this).hide();
       }
    }); 
});

0

remplacer display:block; par display: none;

edit: Oh, j'ai vu que tu voulais l'utiliser jQuery, puis l'utiliser .hide(): http://api.jquery.com/hide/

$('div.section:empty').css("display", "none");

-1

J'ai utilisé le filtrage de la réponse, mais ce.childNodes.longueur conservée de retour 1 aussi quand il n'y a pas de contenu visible, donc fini par combinaison de filtre avec la garniture.
```
$("div").filter(function() {
    return j(this).text().trim() === "";
}).hide();
```

Vous devez vous connecter pour publier un commentaire.

Ma préférence personnelle