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)

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

如果您想返回直系父母，请使用：

$(this).parent()

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

$(this).closest(selector)

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

我希望这会有所帮助。

Answer 3

尝试使用 parents() 或最接近的() 组合，也许，与选择器来确定应该匹配哪个祖先。例如，找到最近的具有 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 或类的元素。这真的取决于你想做什么。