jQuery选择祖先

可以使用jQuery选择元素的祖先吗

标记：

<div id="ancestor-1">
    <div>
        <a href="#" class="click-me">Click me</a>
    </div>
</div>
<div id="ancestor-2">
    <div>
        <a href="#" class="click-me">Click me</a>
    </div>
</div>

---

您正在寻找

parent（）

？用于父选择器。如果您的场景不同，请解释您的预期输出是什么。

您的意思是这样的

$('.click-me').click(function() {
    var $theAncestor = $(this).closest('#ancestor-1');
}

这将搜索所有祖先，直到找到匹配项

编辑：

杰罗姆，你的问题可以用几种方式来解释。这说明了jQuery的强大性和灵活性

请考虑以下事项：

首先，要回答您的问题，是的，可以使用jQuery选择元素的祖先

我认为我们可以假设您知道jQuery能够通过以下方式选择任何元素，无论是祖先元素还是后代元素：

$('#myElement')

给定“单击我”示例，如果希望返回一组元素的所有祖先，请使用：

$(this).parents()

$(this).parent()

或

但请注意，这将遍历所有祖先，并在给定选择器时返回全部或所有匹配项

如果要返回直接父级，请使用：

$(this).parents()

$(this).parent()

如果您知道需要哪个祖先，请使用：

$(this).closest(selector)

但是请注意，它将只返回第一个匹配项，如果当前元素（this）是匹配项，它将返回该匹配项

我希望这有帮助。

尝试直接父元素。

$(".click-me").click(function() {
  var ancestor = $(this).parent();
  alert(ancestor)
});

$(".click-me").click(function() {
  var ancestors = $(this).parents(".some-ancestor");
  alert(ancestors)
});

$(".click-me").click(function() {
  var ancestor = $(this).closest(".some-ancestor");
  alert(ancestor)
});

或所有匹配的祖先元素。

$(".click-me").click(function() {
  var ancestor = $(this).parent();
  alert(ancestor)
});

$(".click-me").click(function() {
  var ancestors = $(this).parents(".some-ancestor");
  alert(ancestors)
});

$(".click-me").click(function() {
  var ancestor = $(this).closest(".some-ancestor");
  alert(ancestor)
});

或第一个最接近的匹配元素（祖先或自我）。

$(".click-me").click(function() {
  var ancestor = $(this).parent();
  alert(ancestor)
});

$(".click-me").click(function() {
  var ancestors = $(this).parents(".some-ancestor");
  alert(ancestors)
});

$(".click-me").click(function() {
  var ancestor = $(this).closest(".some-ancestor");
  alert(ancestor)
});

---

parents（）

和

closest（）

之间的区别是微妙但重要的

closest（）

将返回当前元素（如果匹配）

parents（）

只返回祖先。您可能不希望返回当前元素

closest（）

也只返回一个元素

parents（）

返回所有匹配的元素。

和

将返回ID为的div

尝试结合使用parents（）或closest（），或者使用选择器来确定哪个祖先应该匹配。例如，查找具有id的最近祖先div

$('.click-me').click( function() {
      var ancestorId = $(this).closest('div[id]');
      alert(ancestorId);
});

---

这真的取决于你想要实现什么。是否要搜索所有祖先，而不考虑使用的类？或者您想搜索所有作为祖先并具有特定类的元素（在您的例子中是祖先-x）

如果您想在任何祖先之间循环，只需使用（有一个很好的示例如何在所有元素之间循环）或者您可以使用以下哪一种：

$(".click-me").click(function(){
    var parentElements = $(this).parents().map(function () {
        return this.tagName;
    })
    // whatever else you want to do with it
});

---

最好的方法可能是使用

.parents（）

，直到您找到具有特定id或类的元素。这真的取决于你想做什么。

父母（）和近亲（）之间的区别是微妙但重要的

closest（）

将返回当前元素（如果匹配）

parents（）

只返回祖先。您可能不希望返回当前元素

closest（）

也只返回一个元素

parents（）

返回所有匹配的元素。@Ryan-我的答案是针对这个问题的。这个问题建议查询一个特定的ancestorID，而不是一个关于父母是什么的一般查询。考虑到祖先id的递增性质，jerome似乎打算从上下文中计算祖先id并请求。Patrick，如果jerome打算从上下文中计算祖先id，那么使用

$（this）是绝对没有意义的。最近（“#祖先-1”）

当

$（“#祖先-1”）时

不仅足够，而且速度更快。有时候，最好读懂一个问题的意图并相应地给出答案。@Ryan-尊敬的是，问题的关键在于他似乎在寻找某种特定的东西，而这种东西应该是一个祖先。他的确切问题是“是否可以使用jQuery选择元素的祖先？”。不是“可以使用jQuery返回所有祖先吗？”。你说“有时候，最好读懂一个问题的意图，并相应地引导答案。”但你对“最近的（）”的狡辩是，它可以返回一个元素，包括当前元素。阅读Jerome的意图告诉我们，他正在选择一个独特和特定的祖先。-1他想要最接近的祖先的ID，而不是具有特定ID的祖先。