gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 13:03:22 25 4
gpt4 key购买 nike

我有一个 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()”,但这并没有真正改变我所描述的问题

最佳答案

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

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

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

关于javascript - JQuery - offset()/position() 的回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16587694/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com