javascript - JQuery - offset()/position() 的回调

Question

我有一个 div 包含一个列表元素，它具有静态定位并且对于我想要的每个元素

1. 使用offset()方法记录其绝对定位
2. 将其定位更改为绝对，将其移动到其他位置，然后使用记录的坐标将其移回其原始位置

首先我尝试了这个:

var positions = {};
myDiv.children().each(function(){
    var child = $(this);
    var id = child.attr('id');
    var offset = child.offset();
    positions[id] = [offset.left, offset.top];

    child .css('position', 'absolute');
    var x = ...;
    var y = ...;
    child.css('left', x);
    child.css('top', y);
});

console.log(positions);

在这种情况下，“位置”对象的每个条目都具有相同的坐标(第一个元素的值)。但是，如果我注释掉移动元素的位，则 positions 对象具有每个子项的正确坐标。

所以我猜这是一个同步问题，因为 css 函数在 offset 函数终止之前被调用。

所以我真正需要的是确保 block child.css('left', x); child.css('top', y); 仅在'offset' 函数完成时执行。

我试过类似的东西

$.queue(child, 'foo', function() {
        var offset = $(this).offset();
        positions[id] = [offset.left, offset.top];
        jQuery.dequeue(this);
    });
$.dequeue(child, 'foo');
child.promise().done(function() {
        child.css('position', 'absolute');
        ...
    });

但运气不好:当我记录 positions 对象时，它仍然有错误的坐标。

我对 JS 和 JQuery 很陌生，所以我很确定如何在这里做正确的事情。

如何确保 block child.css('left', x); child.css('top', y); 只会在“positions”对象填充了正确的偏移坐标后执行？

编辑 我刚刚意识到，在我的情况下，我需要使用“position()”而不是“offset()”，但这并没有真正改变我所描述的问题

Answer 1

在 .each() 中，更改同级元素的位置可能会导致在第一个元素之后得到错误的坐标。

为什么不在更改之前获取并存储所有位置？ 我的意思是你应该重复 children 的两倍。

1. 迭代子项和存储位置，不更改任何 css，
2. 再次迭代 childrens 并更改 css。