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/

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

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>

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

2 个答案: