javascript jQuery .append() for 循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32448992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .append() in for loop
提问by Lessar277
I tried looking for an answer here but all of the questions related to my issue are a bit too complicated for someone who just started learning JavaScript like me.
我试图在这里寻找答案，但对于像我这样刚开始学习 JavaScript 的人来说，所有与我的问题相关的问题都有些过于复杂。
I want to create a grid of divs with js/jquery based on user input (eg: if user chooses width = 16, then he will see a 16x16 grid).
我想根据用户输入使用 js/jquery 创建一个 div 网格（例如：如果用户选择宽度 = 16，那么他将看到一个 16x16 的网格）。
Now, I figured, I'll add a DOM element with var $smallDiv = $('<div class="smallDiv"></div>');
现在，我想，我将添加一个 DOM 元素 var $smallDiv = $('<div class="smallDiv"></div>');
And here is the loop that adds the needed number of divs based on user input:
这是根据用户输入添加所需 div 数量的循环：
function addDiv() {
$('#container').append($smallDiv);
}
for (i = 1; i <= divCounter * divCounter; i++){
addDiv();
}
The problem is that this will always create only one div. The loop runs the required number of times, I've checked this using console.log(). So it clearly works, but I get the feeling that each time it loops, the new div overwrites the previous. That wasn't my expectation of .append().
问题是这将始终只创建一个 div。循环运行了所需的次数，我已经使用 console.log() 进行了检查。所以它显然有效，但我觉得每次循环时，新的 div 都会覆盖以前的。那不是我对 .append() 的期望。
I've managed to get around the problem by making the $smallDiv variable a normal one (removing $ from its value, making it just text) but I would love to know how are these two variables different and why does one work in the above scenario but the other does not.
我设法通过使 $smallDiv 变量成为普通变量（从其值中删除 $，使其只是文本）来解决这个问题，但我很想知道这两个变量有何不同以及为什么一个变量在上面工作场景，但另一个没有。
And make it easy on me, I just started learning JS/jQuery.
让我轻松一点，我刚开始学习 JS/jQuery。
采纳答案by Arun P Johny
In the loop, you are appending the same dom element reference($smallDiv) multiple times, which means the element will be added only once.
在循环中，您$smallDiv多次附加相同的 dom 元素 reference( )，这意味着该元素只会添加一次。
Instead in each iteration of the loop, you need to create new instance - you can use .clone()to do that.
相反，在循环的每次迭代中，您需要创建新实例 - 您可以使用.clone()来做到这一点。
function addDiv() {
$('#container').append($smallDiv.clone());
}
回答by Artur K?pp
As an alternative to Arun P Johny solution, this seems to work as well:
作为 Arun P Johny 解决方案的替代方案，这似乎也有效：
var smallDiv = '<div class="smallDiv"></div>'
function addDiv() {
$('#container').append(smallDiv);
}
for (i = 1; i <= divCounter * divCounter; i++){
addDiv();
}
This way its not the same dom element but instead we use a simple string for append.
这样它就不是同一个 dom 元素，而是我们使用一个简单的字符串进行追加。
