0

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

单击.heading标签时，我想对兄弟姐妹采取行动.group。目标是创建类似于手风琴的功能，单击时元素以一种方式反应，而所有其他元素则以另一种方式反应。

这是标记：

<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/

4

1 回答 1

2

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

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

您也可以使用 aclass而不是设置 inline css：

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

参考。

于 2013-09-19T22:53:17.873 回答