jQuery选择祖先

Question

是否可以使用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>

脚本：

$(".click-me").click(function(){
    // var ancestorId = ???;
    alert(ancestorId)
});

Answer 1

尝试使用 作为直接父元素。

$(".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()返回所有匹配的元素。

Answer 2

你是说像这样的东西？

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

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

http://api.jquery.com/closest/

编辑：

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

请考虑以下几点。

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

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

$('#myElement')

给定click-me示例，如果您希望返回一个元素的所有祖先的集合，请使用：

$(this).parents()

或

$(this).parents(selector)

但请注意，当给定选择器时，这将遍历返回all的所有祖先或所有匹配的祖先。

如果您希望返回直接父级，请使用：

$(this).parent()

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

$(this).closest(selector)

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

我希望这能帮到你。

Answer 3

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

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