JQuery sélection des enfants avec les mêmes noms

Question

J'ai une liste qui est introduite dans ma page en utilisant un répéteur ASP.NET. Le répéteur contient un div (divContainer) avec deux divs (divTitle et divDetails) à l'intérieur. Je cache le divDetails et je veux seulement le montrer si l'utilisateur clique sur divTitle.

Cela fonctionne bien pour moi dans le premier divContainer mais tous ceux qui sont générés ne fonctionnent pas ou vont glisser vers le bas les premiers divDetails. Je suppose que c'est parce que tous les éléments qui sont générés par le répéteur ont le même ID afin qu'il sélectionne le premier. J'ai probablement besoin de chercher des éléments enfants seulement ou quelque chose comme ça, mais j'ai du mal à le faire fonctionner.

Voici le HTML:

<div id="divContainer"> 
    <div id="divTitle">Foo</div> 
    <div id="divDetails" class="display:none">Foo details</div> 
</div> 

<div id="divContainer"> 
    <div id="divTitle">Foo</div> 
    <div id="divDetails" class="display:none">Foo details</div> 
</div> 

Qu'est-ce que le script JQuery de montrer les divDetails correctes lorsque divTitle withing le même divContainer est cliqué?

Merci pour votre aide.

Answer 1

donner des cours les (ID doivent être uniques ... la racine de votre problème), comme ceci:

<div class="divContainer"> 
    <div class="divTitle">Foo</div> 
    <div class="divDetails" style="display:none">Foo details</div> 
</div> 

Ensuite, trouver l'élément relativement, par l'intermédiaire .find() ou .children() dans ce cas:

$(".divContainer").click(function() { 
    $(this).find(".divDetails").toggle(); 
}); 

Ici, je suis basculant ouvert/fermé, vous pouvez également utiliser .slideToggle() pour une animation ou juste .show() si vous le voulez afficher uniquement, ne pas basculer-capable de le cacher à nouveau.

Answer 2

Démo

http://jsfiddle.net/Sfna4/

<div class="divContainer"> 
    <div class="divTitle">Moo</div> 
    <div class="divDetails" style="display:none">Moo details</div> 
</div> 

<div class="divContainer"> 
    <div class="divTitle">Foo</div> 
    <div class="divDetails" style="display:none">Foo details</div> 
</div> 
​ 


jQuery(function(){ 
    jQuery('.divTitle').bind('click',function(){ 
        jQuery(this).siblings('.divDetails').slideToggle(); 
    }); 
}); 
​