jQuery append 一個元素不止一次

Question

我目前正在嘗試將 n 個 div 添加到正文的底部，但是使用以下代碼：

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

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

導致只有一個 div 被附加到身體的底部。 我猜這是因為在 for 循環的每次迭代之間沒有刷新正文的內容，但無法弄清楚如何最好地解決它。

Answer 1

與其執行 12 次 DOM 修改，不如將字符串相乘然后只使用一次.append()調用？

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

---

修復您的原始方法

如果您想繼續使用您的方法，您需要在循環內調用$ function 以便在每次迭代時創建一個不同的 jQuery object。 我猜這會慢一些，但它會起作用。

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() function 迭代更糟糕，因為 FOR 循環不是異步的，因此在更大的規模上要慢得多，因為 each() 實例並排運行，當 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>