有沒有更好的方法來選擇不是交互的兄弟的一個元素？

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^[docs]：

獲取的選擇相匹配，開始在當前元素，並通過DOM樹前進了第一個祖先元素。

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

如果你是肯定的結構，你也可以回到只.div3，並選擇它的兄弟姐妹：

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