Question

我正在动态创建<div>元素，以便在页面加载后添加到页面中，这些元素的位置取决于页面上其他元素的位置。

例如

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

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

哪个应该将新的<div>元素100px放在'＃div1'的右边。

我遇到的问题是，在$(document).ready事件中，x和y值分别为100和0，即{{ 1}}返回$('#div1').position()值，我已通过在控制台上检查验证了这些值。或者，当我对按钮单击事件的0和x值进行相同的检查时，即在所有内容完全加载完成后，它将返回正确的y和{{1}我期待的价值观。这意味着当我在x事件中调用函数时，所有元素都尚未加载到页面上。

我尝试过使用window.load以及尝试将其放在y / document.ready中，但两者都无法正常工作。

是否有任何其他事件可以让我在页面加载时自动调用该函数而不必等待用户点击按钮？

('#div1').ready

.load

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

Answer 1

我认为您需要使用offset()，因为position()相对于父元素：

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

Example fiddle

Answer 2

我认为，你误用了appendTo() - 函数。

试试这个：

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

Answer 3

你的代码很好。问题似乎出现在两个地方：

也许你的#container div不是相对定位的。
您说：＆＃34; ...应将新的<div>元素100px放在#div1的右侧。 ... ＆＃34;，但您的代码为$('#div1').position().left + 100：这意味着 100px到右侧，但是是 <100> 。

演示：http://jsfiddle.net/abhitalks/q86HM/

#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'});

似乎工作正常。

Answer 4

使用此活动：

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

Answer 5

我建议你把函数放在小超时，所以所有元素都有时间渲染（可能你用jquery渲染第一个div，所以你的元素在文档准备就绪时没有位置）别忘了关闭div！

  setTimeout(function(){

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

  },1)

等待所有元素被加载做某事？

5 个答案: