2010-09-06 9 views
0

Je me demandais comment je pourrais cacher un div si le div enfant n'existe pas à l'intérieur. Chaque div contiendra une balise h2, mais si la div ne comprend pas de div nommé "info", je voudrais qu'il soit caché. Voici la structure:jquery cache div si enfant div n'existe pas

<div class="qaContainer"> (this div can stay as is, as it contains an "info" div) 
    <h2>Testing Category 03</h2> 
    <div class="info">if this div exists then this parent div can stay as is</div> 
</div> 
<div class="qaContainer"> (i need this div to be hidden as it doesn't contain a "info" div) 
    <h2>Testing Category 04</h2> 
</div> 

Vive

Répondre

2

Je devine que quelque chose comme

$('.qaContainer').not($('.info').parent()).hide(); 

travaillerais.

3

Une solution évidente pourrait être

$('.qaContainer').each(function() { 
    $(this)[0 == $(this).find('.info').size() ? 'hide' : 'show'](); 
}); 

** EDIT **

La solution est évidente, car il est de ne pas utiliser des sélecteurs de fantaisie ou conditionnels; il trouve juste tous les éléments désirés (ici, tous les éléments avec la classe 'qaContainer') et boucle sur eux. Dans la fonction de rappel de la boucle, masquez ou affichez l'élément en cours d'itération selon qu'il existe un élément enfant avec une classe CSS 'info'. Cette solution va cacher ou montrer les éléments, elle est donc générique et réutilisable; il suffit d'exécuter ces trois lignes chaque fois que le DOM change et que vous voulez mettre à jour vos éléments 'qaContainer'.

+0

+1. Bien que cela fonctionne, je pense qu'il serait un peu plus utile d'expliquer pourquoi c'est une «solution évidente». –

+0

bien, solution éditée :) –

+0

C'est une solution vraiment intéressante (bien que comme quelqu'un qui travaille avec CSS plus je trouve habituellement des sélecteurs plus intuitifs). Je pense que '.length' serait mieux que d'appeler une fonction. –