如何选择多个元素的同胞()?

Say I have a <dl> with all the <dd>s hidden. Clicking on a <dt> toggles the <dd>s that follow it using the following code:

假设我有一个

s都被隐藏了。单击
，切换到使用以下代码的: s:

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

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

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

现在，我想在其他的

s之后自动隐藏

s，所以我尝试用以下代码抓取兄弟姐妹:

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

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

But nothing happens, because each <dd> I've already selected with .nextUntil is a sibling to each other. As a result, they're all hidden and nothing gets shown.

但是什么也没有发生，因为每个

我都已经选择了。nextuntil是一个兄弟姐妹。因此，它们都是隐藏的，不会显示任何东西。

There must be a compact way to tell jQuery to select all the siblings EXCEPT those I've already selected, but I can't see it. Ideas?

必须有一种紧凑的方法来告诉jQuery选择除我已经选择的之外的所有兄弟元素，但是我看不到它。想法吗?

4 个解决方案

#1

~~You could do it from the parent:~~

你可以从父母那里得到:

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

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

#2

How about this? Notice the use of the not function, which you can read about here.

这个怎么样?注意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 a class to the elements you show. On each click, you can hide the 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');
});

#4

Here's something a little simpler than these others:

这里有一些比其他的更简单的东西:

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

#1