Get position of the li jQuery

We have a simple ul

<ul><li>text</li><li>text</li><li>text</li><li>text</li></div>

How do take a position of the <li>, from the top and left corner of the <ul>?

li is display: inline, ul has text-align: center. Text inside ul can be divided to severa开发者_运维问答l lines.

You should use .position(). You can select a specific li using :nth-child.

You'll also need to set position: relative on the ul.

For example, to obtain the position of the second li relative to the ul:

http://jsfiddle.net/thirtydot/TgXvp/

var position = $('li:nth-child(2)').position();

alert(position.top);
alert(position.left);

Using jQuery's position method you can get the coordinates of the ul and lis and then subtract them to get the relative position.

As in:

var vertDiff = $('ul li:first').position().top - $('ul').position().top;