Как получить offset() относительно родителя в jQuery?

Это дает мне положение некоторого элемента из левого края главного окна:

$('#bar').offset().left;

Если этот элемент находится внутри некоторого другого элемента, и мне нужна позиция #bar относительно #foo (она родительская), как я могу это получить?

<style>
#foo { width: 200px; margin: 0 auto; }
#foo #bar { width: 50px; margin: 0 auto; }
</style>

<div id="foo">
   <span id="bar"></span>
</div>

Я видел, что есть функция с именем offsetParent(), но когда консоль регистрируется, она не кажется, что эта функция имеет любые свойства, называемые left или x. Поэтому не уверен, что это можно использовать для получения того, что мне нужно.

Итак, в моем примере выше смещение должно составлять примерно 125 пикселей от родительского края, а не несколько тысяч пикселей от основного края окна.

Ответы

Ответ 1

Используйте метод position().

$('#bar').position().left;

Ответ 2

Это достаточно просто: получить смещение элемента и вычесть смещение его родителя.

var elem = $("#bar");
var offset = elem.offset().left - elem.parent().offset().left;

Ответ 3

Положение внутри div относительно его родителя:

В моем случае, когда прокрутка изменилась, вычисленное смещение также изменилось, и этого не должно быть, поэтому я использовал чистый JavaScript, который в любом случае быстрее...

element.get(0).offsetTop

Также возможен другой вариант, например, Left. Element.get(0).offsetLeft

Заключение

element.offset(). top или position() не являются оптимальными для позиционных относительных случаев.

Ответ 4

offsetLeft = $('#bar').position().left;
offsetTop = $('#bar').position().top;