Question

我无法使用jQuery遍历这个特定的DOM树。

点击.heading标签，我想对.group sibiling采取行动。目标是创建与accorion非常相似的功能，点击元素以一种方式作出反应，而所有其他人则采取另一种方式。

这是标记：

<lable class="heading">1</lable>
<div class="group">
    <div class="input">
        <lable>inner</lable>
        <input type="text"></input>
    </div>
</div>
<lable class="heading">2</lable>
<div class="group">
    <div class="input">
        <lable>inner</lable>
        <input type="text"></input>
    </div>
</div>
<lable class="heading">3</lable>
<div class="group">
    <div class="input">
        <lable>inner</lable>
        <input type="text"></input>
    </div>
</div>

这是我到目前为止的jQuery：

$('.heading ').click(function () {
    $('.heading').not(this).each(function () {
       $(this).css('background','blue');
    });
    $(this).css('background','none');
});

我能够抓住被点击的元素而不是下一个兄弟。有人可以给我一个指针吗？

这是一个jfiddle，它做我想要的（但在错误的元素上）： http://jsfiddle.net/orionrush/MDX2x/

Answer 1

您正在寻找.next()方法，请注意您不需要.each()方法，大多数jQuery方法在场景后面调用.each()。

$('.heading').on('click', function() {
    $('.heading').not(this).next('.group').css('background','none');
    $(this).next().css('background','blue');
});

您还可以使用class代替设置内联css：

$('.heading').on('click', function() {
    $(this).next('.group') // next .group sibling
           .addClass('active')
           .siblings('.group') // .group siblings of the selected .group element
           .removeClass('active');
});

Reference

jquery在点击时遍历下一个兄弟姐妹

1 个答案: