jQuery选择祖先

前端之家收集整理的这篇文章主要介绍了jQuery选择祖先前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用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)
});

解决方法

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

parent()和closest()之间的区别是微妙但重要的。 nearest()将返回当前元素,如果它是一个匹配; parents()只返回祖先。你很多不希望返回当前元素的可能性。 nearest()也只返回一个元素; parents()返回所有匹配的元素。

猜你在找的jQuery相关文章