获取相对于 grand 的元素偏移量-..-祖父--父母

Question

我想使用 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>

Answer 1

一个简单的解决方案是计算元素与要使用的引用的.offset()s差。

关于.offset()的文档：https://api.jquery.com/offset/

说明：获取匹配元素集中第一个元素相对于文档的当前坐标。

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>

希望对您有所帮助。

Answer 2

您可以使用getClientBoundingRect()获取它们相对于屏幕的位置并测量差异。 https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

const parent = document.querySelector('.grand-grand-grand-parent');
const child = document.querySelector('#mainChildElement');
console.log(child.getBoundingClientRect().top - parent.getBoundingClientRect().top);

<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>