javascript - 如何选择多个元素的兄弟姐妹（）？

Question

假设我有一个隐藏<dl>所有s 的。<dd>单击 a使用以下代码<dt>切换它后面的s：<dd>

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

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

现在，我想自动隐藏<dd>其他 s 之后的<dt>s，所以我尝试使用以下代码获取兄弟姐妹：

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

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

但是什么都没有发生，因为<dd>我已经选择.nextUntil的每个都是彼此的兄弟姐妹。结果，它们都被隐藏了，什么也没有显示出来。

必须有一种紧凑的方式来告诉 jQuery 选择所有兄弟姐妹，除了那些我已经选择的兄弟姐妹，但我看不到它。想法？

Answer 1

这个怎么样？注意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();
});​

Answer 2

你可以从父母那里做到：

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

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

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