我想使用 javascript/jquery 获取 #mainChildElement
相对于 .grand-grand-grand-parent
的位置。我尝试执行 $('#mainChildElement').offset().top
但这只是返回相对于直接父级的偏移量。
我是否必须通过迭代树来递归地找到位置,并对每个元素的顶部偏移量求和,直到我到达 .grand-grand-grand-parent
或者是否有更优雅的解决方案?
<div class="grand-grand-grand-parent">
<div class="grand-grand-parent">
<div class="grand-parent">
<div class="parent">
<div class="child-element">
Content goes here!
</div>
</div>
</div>
<div class="grand-parent">
<div class="parent">
<div class="child-element">
Content goes here!
</div>
</div>
<div class="parent">
<div class="child-element">
Content goes here!
</div>
</div>
</div>
</div>
<div class="grand-grand-parent">
<div class="grand-parent">
<div class="parent">
<div class="child-element">
Content goes here!
</div>
</div>
</div>
<div class="grand-parent">
<div class="parent">
<div id="mainChildElement" class="child-element">
Where am I?!
</div>
</div>
<div class="parent">
<div class="child-element">
Content goes here!
</div>
</div>
</div>
</div>
</div>
最佳答案
一个简单的解决方案是计算元素与您要使用的引用的 .offset()
差异。
关于.offset()
的文档:https://api.jquery.com/offset/
Description: Get the current coordinates of the first element in the set of matched elements, relative to the document.
var ref_top = $('#gggp').offset().top;
var child_top = $('#mainChildElement').offset().top;
var diff = child_top - ref_top;
console.log('Reference:', ref_top + 'px');
console.log('Child:', child_top + 'px');
console.log('Difference:', diff + 'px');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gggp" class="grand-grand-grand-parent">
<div class="grand-grand-parent">
<div class="grand-parent">
<div class="parent">
<div class="child-element">
Content goes here!
</div>
</div>
</div>
<div class="grand-parent">
<div class="parent">
<div class="child-element">
Content goes here!
</div>
</div>
<div class="parent">
<div class="child-element">
Content goes here!
</div>
</div>
</div>
</div>
<div class="grand-grand-parent">
<div class="grand-parent">
<div class="parent">
<div class="child-element">
Content goes here!
</div>
</div>
</div>
<div class="grand-parent">
<div class="parent">
<div id="mainChildElement" class="child-element">
Where am I?!
</div>
</div>
<div class="parent">
<div class="child-element">
Content goes here!
</div>
</div>
</div>
</div>
</div>
希望有帮助。
关于javascript - 获取元素相对于 grand-...-grand--parent 的偏移量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50800298/