получение позиции плавающего элемента

Question

У меня есть такой код:

<style>
.box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: green;
    border: 1px solid black;
    float: left;

}

#wrapper {
    position: relative;
}
</style>


<div id="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>

Мне нужно получить левую верхнюю часть каждой ячейки относительно #wrapper. Я пытаюсь сделать это через jQuery.position (), однако, я не получаю правильные результаты. Продолжайте получать 0,0. Может кто-нибудь еще. Я думаю, что проблема здесь в плавающих элементах ... если бы они были абсолютно позиционированы, я бы правильно их прочитал.

Answer 1

Вот некоторый код jQuery, который предупредит левую позицию.Это работает с плавающей скважиной.

$(function() {
    $('#wrapper div').each( function( index, item ) {
            alert( $(this).position().left);
    });
});

здесь jsFiddle: http://jsfiddle.net/ytGYS/

Answer 2

Положение на самом деле работает нормально, просто убедитесь, что вы исправили свой #wrapper, чтобы он имел высоту и ширину.Проблема, с которой вы сталкиваетесь, заключается в том, что при перемещении всех элементов ваш родительский #wrapper сворачивается и не имеет размеров, поэтому jQuery не может понять, насколько далеко одна вещь от другой.

Answer 3

Вот скрипка с разметкой и пример кода: http://jsfiddle.net/tBwwr/

Answer 4

+ 1 для andrewheins ответ:

Вы совершенно правы; если #wrapper слишком мал для отображения всех всплывающих элементов рядом друг с другом, $ (). offset () даст вам расположение элементов друг под другом.

Раздражает то, что $ (). Offset () проверяется перед тем, как #wrapper получает правильную ширину. Например, если есть две функции $ (document) .ready (), которые выполняются в неправильном порядке. (сначала получить смещение (), затем установить ширину)

Примечание: у меня недостаточно репутации, чтобы проголосовать за него или оставить комментарий.