sur jQuery: avec beaucoup d'éléments montrent que div de cette ancre cliqués

Question

d'abord: désolé pour mon anglais

j'ai une page web comme celui-ci

<div class="item"><div class="details"> 
<ul> 
<li><a href="#">Show div 1</a></li> 
<li><a href="#">Show div 2</a></li> 
<li><a href="#">Show div 3</a></li> 
</ul> 
<div>div 1</div> 
<div>div 2</div> 
<div>div 3</div>   </div></div> 

IMPORTANT: J'ai plusieurs divs appelé 'article'.

i ont ce script jquery

$(document).ready(function() { 
    $('ul > li > a').each(function(index) { 
    $(this).click(function() { 
    $('.details > div:eq(' + index + ')').toggle() 
    .siblings('.details > div').hide(); 
    }); 
    }); 
}); 

mais si je clique sur 'a' il me montre le 'div' relative pour tous les éléments. Id comme si je clique sur le premier 'a' du premier élément, il me montre le premier 'div' du premier élément SEULEMENT, pas tous les éléments.

est ici une page de test link text (: O il fonctionne uniquement avec des liens sur la première div)

J'espère avoir été clair ..

Merci à tous

Answer 1

EDIT, aïe! l'indice a été de déconner vers le haut, div:eq(' + index + ') cherchait toujours les premier, deuxième et troisième éléments du premier élément div, essayez ceci:

$(document).ready(function() { 
    $('ul > li > a').each(function(index) { 
    $(this).click(function() { 
     $(this).closest('.item').siblings().find('.details > div').hide(); 
     $('.item .details div:eq(' + index + ')').toggle(); 
    }); 
    }); 
}); 

Et essayer d'intégrer une solution plus simple, comme la bière de @ Dave.

Answer 2

Si vous êtes en mesure d'ajouter un attribut de classe aux divs et aux liens.

<div class="item"><div class="details"> 
<ul> 
<li><a href="#" id="div1">Show div 1</a></li> 
<li><a href="#" id="div2">Show div 2</a></li> 
<li><a href="#" id="div3">Show div 3</a></li> 
</ul> 
<div class="div1">div 1</div> 
<div class="div2">div 2</div> 
<div class="div3">div 3</div>   </div></div> 

Ensuite, votre jQuery peut être aussi simple que:

$(document).ready(function() { 
    $('ul > li > a').click(function(){ 
      $('#details > div').hide(); // hide all of the divs 
      $('div.' + this.id).show(); // then show the one with the same class as the link.id that was clicked 
     }); 
    });