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

尝试 parent() 作为直接父元素。

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

或 parents() 对于所有匹配的祖先元素。

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

或者 closest() 表示第一个最接近的匹配元素（祖先或自身）。

$(".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)

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

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

$(this).parent()

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

$(this).closest(selector)

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

我希望这有帮助。

Answer 3

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

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

Answer 4

您在寻找 parent() 吗？ jQuery Doc 用于父选择器。如果您的场景有所不同，请解释您的预期输出是什么。

Answer 5

http://api.jquery.com/parent/ 和 http://api.jquery.com/parents/

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

将返回带有 id 的 div

Answer 6

这实际上取决于您想要实现的目标。您想搜索所有祖先，无论使用什么类别吗？或者您想搜索所有祖先元素并具有特定类别（在您的情况下为ancestor-x）？

如果你想循环遍历任何祖先，只需使用 .parent() （有一个很好的例子循环遍历所有元素）或 .parents() 您可以使用它，例如：

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

可能是最好的方法将使用 .parents() 直到到达具有特定 id 或类的元素。这实际上取决于你想做什么。