javascript - for 循环中的 jQuery .append()

<分区>

我试着在这里寻找答案，但对于像我这样刚开始学习 JavaScript 的人来说，与我的问题相关的所有问题都太复杂了。

我想根据用户输入用 js/jquery 创建一个 div 网格(例如:如果用户选择宽度 = 16，那么他将看到一个 16x16 的网格)。

现在，我想，我将使用 var $smallDiv = $('<div class="smallDiv"></div>'); 添加一个 DOM 元素

下面是根据用户输入添加所需数量的 div 的循环:

function addDiv() {
$('#container').append($smallDiv);
}
for (i = 1; i <= divCounter * divCounter; i++){
addDiv();
}

问题是这将始终只创建一个 div。循环运行所需的次数，我已经使用 console.log() 对此进行了检查。所以它显然有效，但我觉得每次循环时，新的 div 都会覆盖以前的。这不是我对 .append() 的期望。

我已经通过将 $smallDiv 变量设为普通变量(从其值中删除 $，使其成为纯文本)设法解决了这个问题，但我很想知道这两个变量有何不同以及为什么其中一个有效在上面的场景中，但另一个没有。

让我轻松一点，我刚刚开始学习 JS/jQuery。

最佳答案

在循环中，您多次附加相同的 dom 元素引用 ($smallDiv)，这意味着该元素将只添加一次。

相反，在循环的每次迭代中，您需要创建新实例 - 您可以使用 .clone()这样做。

function addDiv() {
    $('#container').append($smallDiv.clone());
}

关于javascript - for 循环中的 jQuery .append()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32448992/

相关文章：

javascript - 如何扩展 jQuery 的 ajax