获取li元素的位置 jQuery

Question

我们有一个简单的无序列表。

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

如何在<ul>元素的左上角定位<li>元素的位置？

如果<li>元素设置为display:inline，而<ul>元素设置了text-align:center，并且在<ul>元素内部的文本可以分成多行，请问如何将<li>元素的位置定位于<ul>元素的左上角？

- Jasper

---

你为什么需要知道<li>的位置？你可以查看这个链接，看看它是否有帮助：http://jqueryui.com/demos/position/ - Elorfin

Answer 1

您应该使用 .position()。您可以使用:nth-child选择特定的li。

您还需要在ul上设置position: relative。

例如，要获取第二个li相对于ul的位置：

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

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

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

- thirtydot

---

一个小声明：该位置是相对于最近的定位元素偏移父元素而言的。如果 ul 元素被定位，那么结果就是所要求的，否则需要采用更复杂的方法。 - Aleksi Yrttiaho

Answer 2

使用jQuery的position方法，您可以获取ul和lis的坐标，然后将它们相减以获得相对位置。

例如：

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

- tonycoupland