在 jQuery 内附加一个带有 for 循环的 div

Question

目前我在 ajax 成功调用中这样做：

$(".user_profiles_holder").append('<div class="appendeditems">');
for(var i=0; i<data.userArray.length; i++){
  var user = data.userArray[i];
  $(".appendeditems").append(user.first_name);
}
$(".user_profiles_holder").append('</div>');

有没有更好的方法来完成我在这里所做的事情？它有效...但我想它可能会中断，具体取决于循环遍历数组等需要多长时间？

Answer 1

您当前的代码实际上是追加 2 个 div，因为通过追加一个 </div> 标记您创建了另一个 div - 您一次只能追加整个元素。也就是说，您可以稍微优化代码以在内存中创建新元素，并且只向 DOM 添加一个元素。试试这个：

var $appendedItems = $('<div />', { 'class': 'appendeditems' });
for (var i = 0; i < data.userArray.length; i++) {
    $appendedItems.append(data.userArray[i].first_name);
}
$appendedItems.appendTo(".user_profiles_holder");

在 jQuery 内附加一个带有 for 循环的 div

Append a div with a for loop inside jQuery

jquery

arrays

for-loop

append