用jquery移动dom结构

Question

我正在创建一个 jquery 脚本，如果单击某个链接元素，则以下 div 的 css 会更改。我的问题是，下一个元素在“父 dom 树”中，我不知道如何选择它。

如果你看看我下面的 html 示例，你就会知道什么意思.. ;)

<div class="box">
                        <div class="rentenBox"><a href="#" title="Info"><span class="hide">Info</span></a></div>
                        <div class="obereZeile"></div>
                        <div class="untereZeile"></div> 

</div> <!-- .box -->
<div class="blueButtonInfo"></div>

所以，如果用户点击 .rentenBox a，.blueButtonInfo 的 css 应该会改变。

到目前为止，这是我的 jQuery：

$('.rentenBox a').click(function(event) {
                event.preventDefault();
                $(this).next('.blueButtonInfo').css('display', 'none');

            })

感谢您的每一次帮助。谢谢！ :)

Answer 1

$(this).parent().next().css('display', 'none');

或

$(this).parent().siblings('.blueButtonInfo').css('display', 'none');

如果您定位的 div 始终位于当前 div 的父级之后，则第一个将起作用。如果 div 的类是 blueButtonInfo，则第二个将始终有效。

Answer 2

blueButtonInfo div 在box 旁边，所以你必须向上 2 个元素，然后调用 next

$(this).parent().parent().next('.blueButtonInfo').css('display', 'none');

//or

$(this).parents('.box').next('.blueButtonInfo').css('display', 'none');