如何在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.所以不确定是否可以用它来获得我需要的东西.

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

Answer 1

使用position()方法.

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

请注意,父级应该是`position:relative`,`absolute`或`fixed`. (18认同)
我很喜欢简单的解决方案. (10认同)
为了澄清alexmngn的注释,.position()仅在父级是位置相对,绝对或固定时才有效.Niet the Dark Absol的答案没有这个限制. (4认同)

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()对于位置相关情况不是最佳的.