javascript - 获取元素相对于 grand-...-grand--parent 的偏移量

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() 差异。

关于.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>

希望有帮助。