使用 jquery 添加带有循环的 div 并将 div 设置为变量

Question

我对这种行为很好奇。 为什么这只会创建一个div ：

 let text = 'some text'; let $div = $('<div></div>'); $div.text(text); for (let x = 0; x < 5; x++) { $('article').append($div); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <article></article>

如果我将追加更改为("</div>" + text + '</div>'); 然后它创建五个。 似乎 div 正在循环中被覆盖，但它不应该每次都附加一个新的吗？ 为什么会被覆盖？

Answer 1

就像 Rory 提到的那样，您引用的是在循环开始之前创建的同一个<div>元素。 每次你可以写一个新的附加一个：

 let text = 'some text'; for (let x = 0; x < 5; x++) { $('article').append('<div>' + text + '</div>'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <article></article>

jQuery 的append()非常通用，它接受 :DOM 元素、文本节点、元素数组、HTML 字符串或 jQuery 对象。 详情请看这里。

Answer 2

您创建的$div的实例将在循环的每次迭代中被引用为相同的对象，使用.append() 。 一旦创建，每次循环只会再次访问它，将其替换为自身，就像您每次都使用选择器和内容操作方法来更改它一样。 如果在文本中包含迭代计数，您可以看到这一点：

 let text = 'some text' let $div = $('<div></div>') for (let x = 0; x < 5; x++) { $div.text(text + ' ' + x) $('article').append($div) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <article></article>

要创建对象的新实例，您可以使用 jquery .clone()方法创建它的深层副本。 这将每次创建一个新对象。

 let text = 'some text' let $div = $('<div></div>') for (let x = 0; x < 5; x++) { $div.text(text + ' ' + x) $('article').append($div.clone()) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <article></article>