2011-10-25 2 views
0

J'ai un code, le p.words est caché, j'ai essayé de faire un juge, si div 012 a span tag, puis montrer le p.words, sinon garder la règle css.jquery si avoir html tag

J'utilise jquery.next et jquery.find pour faire un juge $(this).parent().next('.col').find('span'), mais il affichera tous les p.words même la prochaine div n'a pas d'étiquette span

<style> 
.words{display:none;} 
</style> 
<script src="jquery.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.words').each(function(){ 
     if($(this).parent().next('.col').find('span')){ 
      $(this).css('display','block'); 
     }   
    }); 
}); 
</script> 
<a>Voodoo 
    <p class="words"> 1</p><!-- do not show --> 
</a> 
<div class="col"> 
    <ul> 
     <li>ATI Rage128 Pro</li><!-- no span tag --> 
    </ul> 
</div> 
<a>NVIDIA 
    <p class="words"> GeForce2 MX</p><!-- show --> 
</a> 
<div class="col"> 
    <ul> 
     <li> 
     <span>NVIDIA GeForce2 MX 400</span><!-- have span tag --> 
     </li> 
     <li> 
     <span>ATI 9200SE</span> 
     </li> 
    </ul> 
</div>  

Répondre

3

changement

if($(this).parent().next('.col').find('span')){ 

à

if($(this).parent().next('.col').find('span').length > 0){ 

Le résultat de $(this).parent().next('.col').find('span') est un tableau qui peut ou ne peut pas être vide, mais toujours résoudre à true dans votre condition.

+0

AlienWebguy a raison; Je voudrais aussi simplifier votre code pour utiliser le prochain-siblings-selector mais c'est le coeur de votre problème. – JSager

+0

Les travées ne seraient pas nécessairement des frères et soeurs - il voulait juste savoir si le frère suivant du parent contient des nœuds 'span' de l'enfant. Sa séquence de sélection est sur place. – AlienWebguy

+0

Une petite note: plutôt que le sélecteur ci-dessus retournant un tableau, il renvoie un objet jQuery qui a également une propriété '.length': http://api.jquery.com/length/ – Jasper

1

Je pense que vous pouvez simplifier considérablement votre code avec ceci:

http://api.jquery.com/next-siblings-selector/

Aussi, je pense que la source de votre problème est que find renvoie un tableau vide qui ne luate à "faux". Essayez ce code:

if ($.find("doesnotexist")){console.log("Hi")} 
1

Cette ligne est le coupable:

S'il n'y a pas <span> tag trouvé cela ne reviendra pas faux (il retournera un objet jQuery vide). Essayez d'ajouter .length à la fin de votre sélecteur; qui retournera 0 si l'objet jQuery est vide (0 est truthily égal à false):

if($(this).parent().next('.col').find('span').length){ 

Voici un jsFiddle du changement ci-dessus à votre code: http://jsfiddle.net/qfqJZ/

+0

Quelques commentaires sur les raisons pour lesquelles les votes négatifs seraient très appréciés. – Jasper

1

Vous devez faire un léger changement à votre instruction if:

if ($(this).parent().next('.col').find('span').length > 0) { 
    ... 

http://jsfiddle.net/JMdC6/