JQuery Getting Relative Position of an Element

Question

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 receive the relative position of any range (nested or not) in the main parent element - # selectable1.

I tried using position () but my code is not working:

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

Any tips? Thanx

Answer 1

Inside the event, you are referencing the current element as this , and not the common class name. Remember that the .drag class applies to many elements, and this refers to the current element.

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