jquery 克隆，指数 <div> 创建答案

【问题标题】：jquery clone, exponential <div> creationjquery 克隆，指数 <div> 创建
【发布时间】：2023-04-06 23:05:01
【问题描述】：

我目前正在创建一个应用程序，用户可以在其中将项目拖到邮箱中。

在他们放下物品后，会在邮箱“后面”创建一个新图像，让您感觉它真的掉了进去。

每当有人掉落物品时，我都会使用以下代码创建新图像并为其设置动画：

function animateDrop(){
animateArray.push($('.animateDrop').clone())
xArray.push(xPos)
yArray.push(yPos)

var foo = animateArray[animateArray.length - 1];
var finalxPos = xArray[xArray.length - 1];
var finalyPos = yArray[yArray.length - 1];

$('body').append(foo);
foo.css({'left': finalxPos, 'top': finalyPos + 40}).fadeIn('slow');
foo.animate({'top': '+=100px'},1500);
};
animateDrop();

执行代码时会创建一个新图像，但删除更多项目会导致正在创建的 div 呈指数增长。

它在某个地方记住了所有先前创建的 div，并将它们再次附加到正文（至少在我看来是这样）。

我目前正设法防止这种情况发生，我们将不胜感激。

2011 年 10 月 24 日更新：animateArray.push($('.animateDrop').first().clone()) 将.first()加入数组push，解决了创建多个div的问题。

【问题讨论】：

标签： jquery html clone exponential

【解决方案1】：

你的假设是正确的。您正在复制原始和已复制的所有元素再次。使用不同的类标识符而不是 $(".animateDrop") 或从你不想再复制的地方删除这个类

可能有更好的方法来解决您的问题 - 您可以在拖放项上使用回调函数看这里：http://jqueryui.com/demos/draggable/

【讨论】：

谢谢，通过将 .first() 放在克隆前面解决了我的问题。

【解决方案2】：

只需在克隆调用之前使用 jQuery 的 first() or :first 选择器。这应该可以解决问题。

【讨论】：

谢谢，这确实是我的问题的解决方案。