How to get offset() relative to parent in jQuery?

This gives me the position of some element from the left edge of the main window:

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

If that element is situated inside some other element and I wanted the position of #bar relative to #foo (it's parent), how can I get that?

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

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

I saw that there is a function called offsetParent() but when console logged it doesn't seem like this function has any properties called left or x. So not sure if that can be used to get what I need.

So in my example above the offset should be something around 125px from the parent's edge rather than some thousands of pixels from the main windows edge.

Use the position() method.

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

It's simple enough: get the offset of the element and substract the offset of its parent.

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

Position within a div relative to its parent:

In my case, when scroll changed the calculated offset also changed and it shouldn't so i ended up using pure javascript which is quicker anyway...

element.get(0).offsetTop

Other variation like Left is also possible element.get(0).offsetLeft

Conclusion

element.offset().top or position() are not optimal for position relative cases.

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