Como obter offset () em relação ao pai em jQuery?

Isso me dá a posição de algum elemento da borda esquerda da janela principal:

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

Se esse elemento estiver dentro de algum outro elemento e eu quisesse a posição de #bar em relação a #foo (é pai), como eu posso conseguir isso?

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

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

Eu vi que existe uma função chamadaoffsetParent() mas quando consola logado não parece que esta função tem quaisquer propriedades chamadasleft oux. Então não tenho certeza se isso pode ser usado para conseguir o que eu preciso.

Portanto, no meu exemplo acima, o deslocamento deve ser algo em torno de 125px da borda do pai, em vez de alguns milhares de pixels da borda principal do Windows.

questionAnswers(4)

yourAnswerToTheQuestion