如何在jQuery中获取相对于parent的offset（）？

Question

这为我提供了主窗口左边缘的一些元素的位置：

$('#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的属性。所以不确定是否可以用它来获得我需要的东西。

所以在上面的例子中，偏移应该是距离父边缘大约125px的距离，而不是主窗口边缘的几千个像素。

Answer 1

使用position（）方法。

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

Answer 2

这很简单：获取元素的偏移量并减去其父元素的偏移量。

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

Answer 3

div内相对于其父级的位置：

在我的情况下，当滚动更改时，计算出的偏移量也发生了变化而且不应该这样，所以我最终使用了纯粹的javascript，无论如何都更快......

element.get（0）.offsetTop

像Left这样的其他变体也可能 element.get（0）.offsetLeft

<强>结论

element.offset（）。top或position（）对于位置相对情况不是最佳的。

Answer 4

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