使用jQuery在循环中追加。肯定有更好的办法

Question

我有代码（使用jQuery），如下所示：

var $parent = $('#parentContainer');
$.each([[],[],[],...[]], function(index, innerArray) {
    $.each(innerArray, function(innerIndex, innerValue) {
        $parent.append($('<div />', { ... }));
    });
});

我知道这是非常低效的。 我最初用$ .map代替$ .each尝试了这个。 我将从内部$ .map返回DIV，并且每个数组都将从外部$ .map返回。 然后我会尝试类似$parent.append(arrayOfArrays)东西。 一段时间后我会得到一个未被捕获的例外。 带有$ .each的代码可以工作，但我知道有另一种方法可以使用数组并一次追加它们。 我是否接近$ .map实现？ 我错过了另一种方式吗？ 谢谢顺便说一句，我是一个全新的人，所以我意识到我可能做错了。

Answer 1

我不完全确定你要在这里实现什么，但是根据一般原则，直接注入DOM往往会很慢。 因此，在循环中注入DOM将非常慢。

更好的方法是构建要在循环中插入的元素集合，然后在循环结束时追加（）整个集合。 这用一个DOM替换了多个DOM更新，将昂贵的DOM更新从循环中取出。

Answer 2

构造你的html并在循环后做一个appened

像这样的例子

noteffective

var arr = reallyLongArray;
$.each(arr, function(count, item) {
    var newTr = '<tr><td name="pieTD">' + item + '</td></tr>';
    $('table').append(newTr);
});

有效

var arr = reallyLongArray;
var textToInsert = '';
$.each(arr, function(count, item) {
    textToInsert  += '<tr><td name="pieTD">' + item + '</td></tr>';
});
$('table').append(textToInsert);