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并在循环之后做一个附加

像这样的例子

有效

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);

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

2 个答案: