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

Posted 2023-05-09

【中文标题】在 jQuery 中附加一个带有 for 循环的 div

【英文标题】：Append a div with a for loop inside jQuery

【发布时间】：2015-03-18 23:07:41

【问题描述】：

目前我在我的 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>');

有没有更好的方法来做我在这里做的事情？它可以工作......但我想它可能会根据循环遍历数组等需要多长时间而中断？

【问题讨论】：

寻找像 Mustache jTemplate 这样的 jQuery 模板引擎

【参考方案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");