Question

我有以下html

<div id="to-sort">
    <div class="block" data-id="1">aaaaa</div>
    <div class="block" data-id="2">bbbbb</div>
    <div class="block" data-id="3">ccccc</div>
    <div class="block" data-id="4">ddddd</div>
    <div class="block" data-id="5">eeeee</div>
    <div class="block" data-id="6">fffff</div>
    <div class="block" data-id="7">ggggg</div>
    <div class="block" data-id="8">hhhhh</div>
    <div class="block" data-id="9">iiiii</div>
</div>

我想遍历每个.block并将其位置设置为绝对。我有以下

// Iterate through .blocks
$('.block').each(function(i,v){
    var cssobj = { position: 'absolute', 
                   top: $(this).position().top, 
                   left: $(this).position().left };

    console.log(cssobj);
    //$(this).css(cssobj);
});

如果该行

//$(this).css(cssobj);

已注释掉 - console.log（）显示正确的位置。如果我取消注释

$(this).css(cssobj);

然后它们都被设置到第一个.block（x：0，y：0）

的位置

我确信这与范围有关但我尝试了一个闭包并且无法使其工作。如何将每个div设置为绝对位置？

由于

Answer 1

jQuery .position()获取相对于偏移父项的偏移量：http://api.jquery.com/position/

jQuery .offset()正是您所寻找的。

在第一个将自己设置为absolute之后，下一个向上移动到位。

而是将它分为两遍：

$('.block').each(function(){
    var cssobj = {top: $(this).offset().top, left: $(this).offset().left };
    $(this).css(cssobj);
}).each(function(){ $(this).css('position', 'absolute')});

修改： -

作为替代方案，您可以按相反顺序执行此操作，也可以使用：

$.fn.reverse = [].reverse; $('.block').reverse().each(function(i,v){ var cssobj = {position: 'absolute', top: $(this).offset().top, left: $(this).offset().left }; console.log(cssobj); $(this).css(cssobj); });

.reverse()来自JQuery .each() backwards

Answer 2

以下代码对我来说是错误的

当你想要绝对位置时，你应该得到左边和顶部的值并设置它们的位置：绝对并给出顶部和左边。

这里你得到的是同一个物体的顶部和左侧位置，这些物体是如何定位的？是否在文档流程中，获取rerference元素偏移值并计算您的顶部和左侧值。

$('.block').each(function(i,v){
    var cssobj = { position: 'absolute', 
                   top: $(this).position().top, 
                   left: $(this).position().left };

    console.log(cssobj);
    //$(this).css(cssobj);
});

将div元素设置为具有jquery的绝对位置

2 个答案: