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

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