使用 jQuery 在 for 循环中正确附加元素答案

【问题标题】：Properly append elements in for loop using jQuery使用 jQuery 在 for 循环中正确附加元素
【发布时间】：2014-07-10 03:59:01
【问题描述】：

假设cache["s"].length = 9和cache["n"]是DOM树中的一个元素，

cache[ "c" ] = $("<div/>");
for( n = cache["s"].length; n >= 0; n-- ){cache["n"].append(cache["c"]); }

似乎不起作用，我不知道为什么。它追加 div 元素一次而不是 9 次。

但是，如果我说，

cache[ "c" ] = "<div/>";
for( n = cache["s"].length; n >= 0; n-- ){cache["n"].append(cache["c"]); }

它有效，我得到了 9 个元素，但它们没有正确插入到 DOM 树中。

这是什么问题，我怎样才能在不损失速度的情况下解决它？

【问题讨论】：

【解决方案1】：

cache["c"] 是一个单独的元素，这意味着当你一遍又一遍地追加它时，它不会创建一个新的div，而是取旧的并移动它。使用.clone():

cache["n"].append(cache["c"].clone());

【讨论】：

【解决方案2】：

 cache[ "c" ] = $("<div/>");

这里cache[ "c" ] 是 div 元素的一个实例，如果您多次尝试附加它，它会替换它的实例。

但是如果使用cache[ "c" ] = "<div/>";，那么它每次都会添加新的div元素。

如果您想使用cache[ "c" ] = $("<div/>");，请尝试每次都附加其克隆。

【讨论】：