Jak wybrać rodzeństwo() z wielu elementów?

Question

Powiedz, że mam <dl> z ukrytymi wszystkimi <dd>. Kliknięcie <dt> przełącza <dd> s, które następują go za pomocą następującego kodu:

$(this).nextUntil('dt').toggle(); 

http://jsfiddle.net/mblase75/FZQj7/

Teraz chcę, aby automatycznie ukryć <dd> s po innych <dt> s, więc staram się chwycić rodzeństwo z tym kodem:

$(this).nextUntil('dt').toggle() 
    .siblings().filter('dd').hide(); 

http://jsfiddle.net/mblase75/FZQj7/1/

Ale nic się nie dzieje, ponieważ każdy <dd> już wybrałem z .nextUntil jest rodzeństwem dla siebie. W rezultacie wszystkie są ukryte i nic się nie pokazuje.

Musi być zwarty sposób, aby powiedzieć jQuery, aby wybrała wszystkie rodzeństwo, Z WYJĄTKIEM tych, które już wybrałem, ale nie widzę tego. Pomysły?

Answer 1

Można to zrobić od rodzica:

$('dt').on('click',function() { 
    $(this).nextUntil('dt').toggle().siblings("dt").not(this).nextUntil('dt').hide(); 
});​ 

http://jsfiddle.net/FZQj7/7/

Answer 2

Co powiesz na to? Zwróć uwagę na użycie funkcji not, which you can read about here.

http://jsfiddle.net/lbstr/FZQj7/6/

$('dt').on('click',function() { 
    var $this = $(this), 
     $firstGroup = $this.nextUntil('dt'); 
    $firstGroup.toggle(); 
    $this.siblings('dd').not($firstGroup).hide(); 
});​ 

Answer 3

Prostym rozwiązaniem jest zastosowanie klasę elementów pokażesz. Przy każdym kliknięciu możesz ukryć elementy w tej klasie przed wyświetleniem odpowiedniego zestawu.

http://jsfiddle.net/FZQj7/11/

$('dt').on('click',function() { 
    $('.visibledd').hide().removeClass('visibledd'); 
    $(this) 
     .nextUntil('dt') 
     .toggle() 
     .addClass('visibledd'); 
});​ 

Answer 4

Oto coś trochę prostsze niż tych innych:

$('dt').on('click',function() { 
    $(this).siblings('dd').hide(); 
    $(this).nextUntil('dt').show(); 
});