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)
});

- jerome

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

- Ryan McGeary

Answer 2

你的意思是像这样吗？

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

这将搜索所有的祖先元素，直到找到匹配的为止。

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

编辑：

Jerome，你的问题可能有多种解释。这说明了 jQuery 的强大和灵活性。

请考虑以下内容。

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

我认为我们可以假设你已经知道 jQuery 通过以下方式选择任何元素，无论是祖先或后代元素：

$('#myElement')

如果你想要返回一个元素所有祖先的集合，请使用以下代码，基于给定的click-me示例：

$(this).parents();

$(this).parents()

或者

$(this).parents(selector)

请注意，这将遍历所有的祖先元素并返回所有匹配的元素（如果提供了选择器则返回匹配的元素）。

如果只想返回直接父元素，请使用：

$(this).parent()

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

$(this).closest(selector)

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

希望这有所帮助。

- user113716

---

parents()和closest()之间的区别微妙但重要。如果当前元素匹配，closest()将返回该元素本身；而parents()则仅返回祖先元素。你可能不希望返回当前元素的可能性。另外，closest()只返回一个元素；而parents()返回所有匹配的元素。 - Ryan McGeary

他想要最近祖先的ID，而不是具有特定ID的祖先。 - Gumbo

@Ryan - 关于使用$('#ancestor-1')，那是显然的。我只是在使用他的例子标准。在那种情况下，closest()和parents()都不合适。问题有点模糊，例子也不是完美的，因此产生了摩擦。 - user113716

@Gumbo，他的代码示例看起来有点像那样，但他的问题表明他想要获取元素。他的变量ancestorID让我觉得他只是存储了那个ID，然后使用ancestorID来获取元素。我可能错了。只是不太清楚。 - user113716

@patrick：抱歉，但选择具有ID ancestor-1 的元素绝对是微不足道的。我不认为他真的在问那个。 - Gumbo

Answer 3

尝试使用parents()或closest()方法，结合选择器来确定匹配哪个祖先元素。例如，查找最近的带有id属性的祖先div元素。

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

- tvanfosson

Answer 4

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

。

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

将返回具有这些id的divs

- harpax

Answer 5

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

- Ondrej Slinták

Answer 6

你正在寻找 parent() 吗？jQuery Doc 提供了 parent 选择器的相关文档。如果您的情况不同，请解释您期望的输出是什么。

- Teja Kantamneni