32

是否可以使用 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)
});
4

6 回答 6

50

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

于 2010-02-04T15:22:45.340 回答
11

你的意思是这样的？

$('.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) 是匹配项，它将返回那个匹配项。

我希望这有帮助。

于 2010-02-04T15:21:37.180 回答
2

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

$('.click-me').click( function() {
      var ancestorId = $(this).closest('div[id]');
      alert(ancestorId);
});
于 2010-02-04T15:27:36.110 回答
0

这真的取决于你想要实现什么。您想搜索所有祖先而不考虑使用的类吗？或者您是否要搜索所有祖先元素并具有特定类（在您的情况下为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 或类的元素。这真的取决于你想做什么。

于 2010-02-04T15:47:55.950 回答
0

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

于 2010-02-04T15:21:30.180 回答
0

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

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

将返回带有 id 的 div

于 2010-02-04T15:23:32.750 回答