.position() не указывает на контейнер

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>, правильно?

Что мне делать, чтобы получить позицию item-1 -> top: 10, left: 20?

Answer 1

Вы должны добавить позицию стиля: относительно для вашего

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

затем

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

Answer 2

Не может быть проще. Просто вызовите метод position() на li с:

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

Возвращает объект со свойствами top и left. Вам также необходимо установить ul в position: relative в свой CSS.

#item-menu { position: relative; } 

скрипку: http://jsfiddle.net/ByZRV/2/

Answer 3

Вы можете использовать .position() вычислить местоположение элемента:

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

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

Here's a demo.