¿Cómo selecciono los hermanos() de múltiples elementos?

Question

Digamos que tengo un <dl> con todos los <dd> s escondidos. Al hacer clic en un <dt> alterna el <dd> s que le siguen usando el siguiente código:

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

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

Ahora, yo quiero ocultar automáticamente el <dd> s después de los otros <dt> s, por lo que tratan de captar la hermanos con este código:

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

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

Pero no ocurre nada, porque cada <dd> que ya he seleccionado con .nextUntil es un hermano entre sí. Como resultado, están todos ocultos y no se muestra nada.

Debe haber una forma compacta de decirle a jQuery que seleccione todos los hermanos EXCEPTO los que ya he seleccionado, pero no puedo verlo. Ideas?

Answer 1

que podría hacerlo desde la matriz:

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

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

Answer 2

¿Qué le parece esto? Observe el uso de la función 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

Una solución sencilla es aplicar una clase a los elementos que mostrar. En cada clic, puede ocultar los elementos con esta clase antes de mostrar el conjunto deseado.

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

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

Answer 4

Aquí es algo un poco más simple que estos otros:

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