javascript - 有没有更好的方法来选择一个不是交互元素的兄弟元素的元素？

Question

你可以在这个 fiddle 上找到我的想法的演示:

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

我不认为到达它的 parent 不是很有效。你有什么建议吗？

Answer 1

使用.closest ^[docs] :

Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.

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

如果您确定该结构，您也可以返回 .div3 并选择它的同级:

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