Wie wähle ich Geschwister() aus mehreren Elementen?

Question

Angenommen, ich habe eine <dl> mit allen <dd> s ausgeblendet. Ein Klick auf ein <dt> schaltet die <dd> s, die es mit dem folgenden Code folgen:

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

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

Nun, ich möchte die <dd> s im Anschluss an die anderen <dt> s automatisch verstecken, so dass ich versuchen, das packen Geschwister mit diesem Code:

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

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

Aber nichts passiert, weil jeder <dd> ich bereits mit .nextUntil ausgewählt habe ist ein Geschwister zueinander. Infolgedessen sind sie alle versteckt und nichts wird gezeigt.

Es muss eine kompakte Möglichkeit geben, jQuery anzuweisen, alle Geschwister auszuwählen, AUSSER denen, die ich bereits ausgewählt habe, aber ich kann es nicht sehen. Ideen?

Answer 1

Man konnte es von der Mutter tun:

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

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

Answer 2

Wie wäre es damit? Beachten Sie die Verwendung der Funktion 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

Eine einfache Lösung ist es, Ihnen zeigen eine Klasse auf die Elemente anzuwenden. Mit jedem Klick können Sie die Elemente mit dieser Klasse ausblenden, bevor Sie die gewünschte Menge anzeigen.

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

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

Answer 4

Hier ist etwas ein wenig einfacher als diese anderen:

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