是否有更好的方法来选择不是交互元素的兄弟元素?

Question

您可以在这里找到我的想法的演示:

http://jsfiddle.net/Hwdfz/7/

HTML:

<div class="div1">
    <div class="div2">
        Div2
    </div>
    <div class="div3">
        <div class="div4">
            <a href="#">Div4</a>
        </div>
    </div>
</div>
<div class="div1">
    <div class="div2">
        Div2
    </div>
    <div class="div3">
        <div class="div4">
            <a href="#">Div4</a>
        </div>
    </div>
</div>

JavaScript:

$('.div3 a').each(function(){
    $(this).bind('click',function(){
        $(this).parents('.div1').find('.div2').css('background','#FF0000');    
    });
});

我认为联系它的父母不是很有效。你有什么建议吗?

Answer 1

使用.closest <一口>[医生]:

获取与选择器匹配的第一个祖先元素，从当前元素开始，通过DOM树向上进行。

$('.div3 a').click(function(){
    $(this).closest('.div1').find('.div2').css('background','#FF0000');    
});

如果您确定该结构，您还可以只返回.div3并选择其兄弟节点:

$(this).closest('.div3').siblings('.div2').css('background','#FF0000');