選擇具有最接近的共同祖先的元素

Question

我需要找到一種方法來選擇與給定元素共享最接近的共同祖先的DOM元素。

這裏就是我的意思是：

<div class="grandparent"> 
    <span class="match not-this-one"> 
    <div class="parent"> 
     <span class="match this-one"> 
     <div class="container"> 
     <span class="me"> 
     </div> 
</div> 

我想要的東西，做到這一點：

$('.me').closestCousin('match'); selects <span class="match this-one"> 

最接近（）和父（）選擇的祖先，但不要找表弟元素。

Answer 1

可以使用.closest()具有選擇:not(.me)從由.closest()被匹配排除當前元素; siblings()與選擇.match

$(".me").closest(":not(.me)").siblings(".match").addClass("matched")

.matched { 
 
    color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="grandparent"> 
 
    <span class="match not-this-one">not-this-one</span> 
 
    <div class="parent"> 
 
     <span class="match this-one">match this-one</span> 
 
     <div class="container"> 
 
     <span class="me">me</span> 
 
     </div> 
 
</div>

Answer 2

這應該工作： $（'。me'）。closest（'。match'）;

但它只能上升到DOM樹。如果這是你需要什麼，

Answer 3

我認爲最好的方法是編寫結合使用.prev()和.parent()找到你最近表姐遞歸函數。

編輯：我誤解了這個問題。該解決方案在樹上搜索以找到最接近的目標，並且作爲其實現的副產品還將找到最初元素的兄弟。

function closestCousin(me, target) { 
 
    var cousin = me.prev(target); 
 
    if (cousin.length) { 
 
    return cousin; 
 
    } else { 
 
    var parent = me.parent(); 
 
    if (parent.length) { 
 
     return closestCousin(parent, target); 
 
    } else { 
 
     return parent; 
 
    } 
 
    } 
 
} 
 

 
var me = $(".me"); 
 
closestCousin(me, ".match").css("color", "red"); 
 
closestCousin(me, ".match2").css("color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="grandparent"> 
 
    <span class="match match2 not-this-one">Don't Match</span> 
 
    <div class="parent"> 
 
     <span class="match this-one">Match</span> 
 
     <div class="container"> 
 
     <span class="me">Me</span> 
 
     </div> 
 
    </div> 
 
</div>