Geek asks and answers

How to select multiple brothers () from multiple items?

Say I have <dl>a hidden one <dd>. By clicking on the button <dt>, you will go to the next character <dd>using the following code:

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

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

Now I want to automatically hide <dd>, following the other <dt>s, so I am trying to capture siblings with this code:

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

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

But nothing happens, because everyone <dd>that I have already chosen with help .nextUntilis a brother among themselves. As a result, they are all hidden and nothing is displayed.

There must be a compact way to tell jQuery to select all the EXCEPT siblings that I have already selected, but I do not see them. Ideas?

+5
4

:

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

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

+2

? not, .

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

A simple solution is to apply the class to the elements you display. Each time you click, you can hide elements with this class before showing the desired set.

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

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

Here a little easier than others:

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

More articles:


All Articles