Javascript 等待加载所有元素以执行某些操作？

我正在动态创建

元素，以便在页面加载后添加到页面中，这些元素的位置取决于页面上其他元素的位置

例如

$（文档）.ready（函数（）{
var x=$（“#Mon”）.position（）.left；
变量y=$（“#17”）.position（）.top；
控制台日志（x）；
控制台日志（y）；
$("")
.appendTo（“#container”）
.css（{'width'：'100px'，'left'：x'，'height'：'100px'，'top'：y'，position'：'absolute'}）；
});

---

这是代码的简化版本，因为我不允许发布完整版本，但所有主要部分都在那里。其思想是为从模型数据中获取的“约会”创建一个div元素，并根据约会的日期，从正确的Day元素中获取正确的x值，以及来自正确时间元素的y值，用于定位创建的div，以便将其直接放在背景表上。

我认为您需要使用

offset（）

，因为

position（）

是相对于父元素的：

x = $('#div1').offset().left + 100;
y = $('#div1').offset().top;

---

我想，您误用了

appendTo（）

-函数

试试这个：

$('#container').append('<div></div>').css({
    'position': 'absolute', 
    'top': y, 
    'left': x
});

$（“#容器”）.append（“”）.css({
'位置'：'绝对'，
“顶部”：y，
“左”：x
});

我建议将函数设置为小超时，这样所有元素都有时间渲染（可能是使用jquery渲染第一个div，所以元素在文档就绪时没有位置） 别忘了关闭div

  setTimeout(function(){

     $('<div></div>').appendTo('#container').css({
        'position': 'absolute', 
        'top': y, 
        'left': x
     });

  },1)

setTimeout（函数（）{
$（''）.appendTo（'#container'）.css({
'位置'：'绝对'，
“顶部”：y，
“左”：x
});
},1)

您的代码很好。问题似乎有两个方面：

可能您的

#容器
div没有相对定位

您的意思是：“…应该将新的

元素100px放在

#div1

…”的右侧，但是您的代码是

$（'#div1'）.position（）.left+100

：这意味着它不是右边的100px，而是左边的100px

演示：

#容器{
背景色：#ccc；
宽度：400px；高度：400px；
位置：相对位置；
}
#第一组{
背景颜色：黄色；
宽度：200px；高度：200px；
位置：绝对位置；
顶部：10px；左侧：10px；
}
x=$（'#div1'）.position（）.left+100；
y=$（'#div1'）.position（）.top；
$（''）.appendTo（'#container'）.css（{'position'：'absolute'，'top'：y'，left'：x'，width'：'100px'，'height'：'100px'）；

它似乎工作正常。

使用此事件：

$(document).load(function () {
 // code here
});

---

请张贴相关的HTML和Javascript代码。请小提琴。据我所知，

ready（）

是在加载所有元素后触发的…您是否尝试过

$（窗口）。在（'load'，function（）{}）

上，如果不起作用，请尝试解决方案-我通常对加载的图像执行计数器，当计数器与我的imgs.length匹配时，我将触发一个计数器function@Pete我尝试了$（window）.on（'load'，function（））{}）同样，由于某种原因，当我加载.load时，事件根本不会被触发。感谢您的回复。我遇到的问题与实际将新div追加到页面无关，而是试图从.ready（）事件中获取现有div的顶部和左侧位置。在这个阶段，由于某些原因，位置是0。如果我有：$（document）.ready（function（）{console.log（$（'div1'）.position（）.top）；console.log（$（'div1'）.position（）.left）；}）；它们都返回0，但如果我在页面完全加载后从按钮单击事件中执行相同的操作，它将返回正确的值。@SenTaiyou:你看到我链接到的小提琴了吗？它完美地获得了现有div的左上角。

.ready

是正确的位置。@SenTaiyou:现在看到这个：（）它正确地获得了左上角。你是否正确地确定了位置？我已经查看了小提琴并尝试了容器上的相对位置等，但仍然没有得到我需要的值…我将修改我的帖子，以包含我的原始html和脚本。我只是尝试使用.offset，但我遇到了相同的问题。左边和上面的位置都是0，然后检查你的CSS。它肯定会起作用，就像提琴前的例子一样。

$('#container').append('<div></div>').css({
    'position': 'absolute', 
    'top': y, 
    'left': x
});

  setTimeout(function(){

     $('<div></div>').appendTo('#container').css({
        'position': 'absolute', 
        'top': y, 
        'left': x
     });

  },1)

#container {
    background-color: #ccc;
    width: 400px; height: 400px;
    position: relative;
}

#div1 {
    background-color: yellow;
    width: 200px; height: 200px;
    position: absolute;    
    top: 10px; left: 10px;
}

x = $('#div1').position().left + 100;
y = $('#div1').position().top;

$('<div>').appendTo('#container').css({'position': 'absolute', 'top': y, 'left': x, 'width': '100px', 'height': '100px'});

$(document).load(function () {
 // code here
});