获取浮动元素的位置

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

andrewheins 的回答+1：

你完全正确；如果 #wrapper 太小而无法显示所有相邻的浮动元素，则 $().offset() 将为您提供彼此相邻的元素的位置。

烦人的事情是在 #wrapper 获取正确宽度之前检查 $().offset() 。例如，如果有两个 $(document).ready() 函数以错误的顺序执行。 （首先获取 offset()，然后设置宽度）

注意：我没有足够的声誉来投票支持他的答案或发表评论。