javascript - 使用 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

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

更好的方法是建立要插入循环中的元素集合，然后在循环结束时 append() 整个集合。这用单个更新替换了多个 DOM 更新，从而使昂贵的 DOM 更新脱离了循环。