是否可以使用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()返回所有匹配的元素。