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">

nearest（）和parent（）选择祖先，但不要寻找表兄弟元素。

Answer 1

我认为最好的办法是编写一个递归函数，结合使用.prev()和.parent()来找到最近的堂兄。

编辑：我误解了这个问题。该解决方案搜索树以找到最接近的目标，并且作为其实现的副产品也将找到原始元素的兄弟。

＆＃13;

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");

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用.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 3

这应该有效： $（ '我。 '）最接近的（' 匹配。'）;

但它只会上升到DOM树。如果那就是你需要的，

Answer 4

$('.me').closest(':has(.match)').find('.match')

选择最接近的公共祖先（最接近的元素包含具有匹配类的后代）。然后选择匹配的后代。搜索是任何后裔，而不仅仅是孩子！

e1
- 。匹配两个
- e2
  - e3
    - 。匹配一个
- e2b
  - .me

.match one 在这里找到。

要获得 .match两个，请运行：

$('.me').parents().children('.match').first()

选择所有祖先（最接近的祖先），然后让其子代符合条件。选择第一个，因为这是最接近的一个。

选择具有最近共同祖先的元素

4 个答案: