複数の要素の兄弟（）を選択するにはどうすればよいですか？

Question

<dl>があります。<dd>がすべて非表示になっています。 <dt>をクリックすると、次のコードを使用して、それに従ってください<dd>の切り替わり：今

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

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

を、私は自動的に他の<dt>秒以下<dd> Sを非表示にしたいので、私はつかむしよう

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

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

：このコードの兄弟3210

しかし、すでに.nextUntilで選択した<dd>はお互いの兄弟であるため、何も起こりません。結果として、彼らはすべて隠され、何も表示されません。

すでに選択したものを除いてすべての兄弟を選択するようにjQueryに指示するコンパクトな方法が必要ですが、私はそれを見ることができません。アイデア？

Answer 1

あなたは親からそれを行うことができます：

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

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

Answer 2

これはいかがですか？ 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

簡単な解決策は、あなたが示す要素にクラスを適用することです。クリックするたびに、このクラスで要素を非表示にしてから目的のセットを表示できます。

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

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

Answer 4

ここではこれらの他のものより少し単純なものだ：

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