javascript - 如何在jQuery中获得相对于父级的偏移量（）？

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()，但是当控制台登录时，这个函数似乎没有任何名为leftor的属性x。所以不确定这是否可以用来获得我需要的东西。

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

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;