jQuery getting element relative position

Question

Hi, I have the following markup:

<div id="selectable1">
<span class="drag">Some Text</span>
<span class="drag">Some Text</span>
<span class="drag">Some Text and <span class="drag">Some Other Text</span></span>
</div>

I need to create a function that will get the relative position of any span (nested or not) to the main parent - #selectable1.

I have tried to use position() but my code does not work:

$(".drag").live('click',function(){ 
var relativepos = $('.drag').position().left
alert(relativepos); 
});

Any tips? Thanx

Answer 1

Within the event, you refer to the current element as this, and not by the generic classname. Remember, the class .drag refers to many elements while this refers to the current element.

$(".drag").live('click',function(){ 
  alert( $(this).position().left ); 
});

Answer 2

Thanks Man, it worked, I had been in a lot strees before due to position:relative thing.. cheers..