Получить смещение элемента относительно grand -...- grand - parent

Question

Я хотел бы получить позицию #mainChildElement относительно .grand-grand-grand-parent, используя javascript / jquery.Я попытался сделать $('#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>