javascript - jQueryで親に対するオフセット()を取得する方法は?

Question

これにより、メイン ウィンドウの左端からの要素の位置がわかります。

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

その要素が他の要素内にあり、#foo (親) に対する #bar の位置が必要な場合、どうすればそれを取得できますか?

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

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

という関数があることがわかりましたが、コンソールがログに記録されたとき、この関数にはまたはoffsetParent()と呼ばれるプロパティがあるようには見えません。そのため、それを使用して必要なものを取得できるかどうかはわかりません。leftx

したがって、上の私の例では、オフセットは、メイン ウィンドウの端から数千ピクセルではなく、親の端から約 125 ピクセルにする必要があります。

Answer 1

position() メソッドを使用します。

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

Answer 2

要素のオフセットを取得し、その親のオフセットを減算します。

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

Answer 3

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