Question

我有这样的代码：

<div id="item-menu">
  <ul style="padding-top: 10px; padding-left: 20px;">
    <li id="item-1">1</li>
    <li id="item-2">2</li>
    <li id="item-3">3</li>
  </ul>
</div>

我想获得相对于容器的每个项目位置。在此示例中，我将获得相对于<li>的每个<ul>位置，对吧？

我应该怎样做才能获得第1项的位置 - ＆gt;上：10，左：20？

Answer 1

不可能更简单。只需在li s上调用position()方法：

var position = $("#item-?").position();

返回具有属性top和left的对象。您还需要在CSS中将ul设置为position: relative。

#item-menu { position: relative; }

小提琴：http://jsfiddle.net/ByZRV/2/

Answer 2

您可以使用.position()来计算元素的位置：

var offset = $('#item-1').position();

alert(offset.left + ', ' + offset.top); // 20, 10

Here's a demo.

Answer 3

你必须添加样式位置：相对于你的

  <ul style="position:relative;   padding-top: 10px; padding-left: 20px;">

然后

$('#item-menu ul li').each(function(){
    console.info( $(this).position());
});

.position（）不指向容器

3 个答案: