Question

我正在尝试将n个div添加到正文的底部，但是使用此代码：

star = $('<div class="star" />');

for(i=0; i<12; i++) {
    $('body').append(star); 
}

导致只有一个div被附加到身体的底部。我猜这是因为在for循环的每次迭代之间没有刷新正文的内容，但是无法弄清楚如何最好地解决它。

Answer 1

为什么不multiply the string然后只使用一个.append()来调用，而不是执行12次DOM修改？

String.prototype.times = function(n) {
    return Array.prototype.join.call({length: n+1}, this);
};

var star = '<div class="star" />'.times(12);
$('body').append(star);

jsFiddle

修复原始方法

如果你想继续使用你的方法，你需要在循环中调用$函数，以便在每次迭代时创建一个不同的jQuery对象。我猜这比较慢，但它确实有效。

star = '<div class="star" />';
var body = $('body');

for ( i = 0; i < 12; i++ ) {
    body.append($(star));
}

jsFiddle

Answer 2

$('body').append(new Array(13).join('<div class="star" />'));

Answer 3

试试这个

var star = '<div class="star" />SomeTest</div>';

for(i=0; i<12; i++) {
    $('body').append(star); 
}

Answer 4

应该注意的是，使用FOR循环比使用jquery .each（）函数迭代更糟糕，因为FOR循环不是异步的，因此在更大规模上要慢得多，因为每个（）实例并排运行，当FOR时在继续下一次迭代之前，循环等待每次迭代完成。

（由于50个代表要求，不能仅仅发表评论。）

Answer 5

$(document).ready(function() {
    star = '<div class="star" />';
    var body = $('body');

    for ( i = 0; i < 12; i++ ) {
        body.append($(star));
    }
});

.star {  border: 1px solid black; height: 20px; width: 100px;margin-bottom:1px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

jQuery不止一次追加一个元素

5 个答案:

修复原始方法