最も近い共通祖先を持つ要素を選択する

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()を使用することができます。セレクタ質問でhtml` `で` `タグと終了タグの欠落.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>