JQuery выбирает детей с одинаковыми именами

Question

У меня есть список, который подается на мою страницу с использованием повторителей ASP.NET. Повторитель содержит div (divContainer) с двумя div-объектами (divTitle и divDetails) внутри. Я скрываю divDetails и хочу показать его, только если пользователь нажмет на divTitle.

Это прекрасно работает для меня, когда в первом divContainer, но все последующие сгенерированные не работают или будут скользить вниз по первым divDetails. Я предполагаю, что это потому, что все элементы, которые генерируются повторителем, имеют одинаковый идентификатор, поэтому он выбирает первый. Мне, вероятно, нужно искать только дочерние элементы или что-то в этом роде, но я изо всех сил пытаюсь заставить их работать.

Вот 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>

Каким будет сценарий JQuery для отображения правильных divDetails при нажатии на divTitle с тем же divContainer?

Спасибо за вашу помощь.

Answer 1

Демо

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();
    });  
});
​

Answer 2

Дайте им классы (идентификаторы должны быть уникальными ... корень вашей проблемы), например:

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

Затем найдите элемент относительно, через .find()или .children() в данном случае:

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

Здесь я переключаю его открытое / закрытое, вы также можете использовать .slideToggle() для анимации илипросто .show(), если вы хотите, чтобы он показывался только, без возможности переключить его снова.