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

Posted 2023-05-09

【中文标题】使用 jQuery 在 for 循环中正确附加元素

【英文标题】：Properly append elements in for loop using jQuery

【发布时间】：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 树中。

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

【问题讨论】：

你的意思是cache[n]，没有报价？

不，“n”是缓存数组中的索引。

好吧，变量名不是很直观:)

【参考方案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/>");，请尝试每次都附加其克隆。