jQuery .append() in for loop
jQuery .append() in for loop
我试着在这里寻找答案,但是所有与我的问题相关的问题对于像我这样刚开始学习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
相关文章:
- jQuery setTimeOut: in for-loop
- javascript/angularjs 将 String 与 number for loop 连接起来
- JavaScript for loop
- Native/$q Javascript For Loop Promise Resolve
- Javascript / Openlayers for loop不起作用
- for loop inside another for loop javascript (jquery)
- Json "for" loop
- 如何使用$q promise同步执行FOR LOOP
- JavaScript for loop "document.getElementById"
- Javascript Generic For Loop
- JavaScript For Loop - 执行终止条件
- 在 for loop JavaScript 中添加数字
- New to Javascript - For Loop
- MongoDB For Loop更新错误的用户
- javascript for loop won't iterate
- Javascript for loop产生意想不到的结果
- for loop, Math.random() 不按预期运行
- Javascript:for loop获取数据,但顺序被破坏了
- 有一些JavaScript问题,for loop.将数字转换为其字符串值
- JavaScript for-loop:如何让我的数字转换器工作