情景
有这么一种情景需求:
想要通过该元素获取另一个元素,但这两者只存在唯一的关系就是:具有相同的祖先元素。比如下面的 $ (‘.btn’)元素和 $ (‘.target’)元素。
<ul>
<li class="item">
<div>
<div class="target"></div>
</div>
<button class="btn"></button>
</li>
<li class="item">
<div>
<div class="target"></div>
</div>
<button class="btn"></button>
</li>
</ul>
遇到这种情况,乃至更错综复杂的代码,只要能找到他们的祖先元素,然后再往下找后台元素。问题都能迎刃而解:
$(this).parents('').find('')
示例
点击按钮,获取同在类名为“item”的元素下的$ (“target”)相对于文档的偏移坐标
$('.btn').on('click',function(){
alert($(this).parents('.item').find('.target').offset())
})
拓展
jquery以下3个方法的用法与定义
offset() 方法:用以设置或返回被选元素相对于文档的偏移坐标。
find() 方法:用以获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
parents() :用以获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的。