jQuery .append() in for loop

jQuery .append() in for loop

本文关键字：for loop in append jQuery      更新时间：2023-09-26

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

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

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

下面是根据用户输入添加所需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());
}

作为Arun p Johny解决方案的替代方案，这似乎也很有效:

var smallDiv = '<div class="smallDiv"></div>'
function addDiv() {
    $('#container').append(smallDiv);
}
for (i = 1; i <= divCounter * divCounter; i++){
    addDiv();
}

这样它就不是同一个dom元素了，而是我们使用一个简单的字符串来append

相关文章：