我通过一个对象数组进行筛选，对于数组中的每个迭代，我都会使用一个模板，并将其替换为当前所在对象的唯一信息(属性)。然后将模板附加到DOM中。
请查看第一个代码块，注意代码行$('body').append(temp);位于$.each迭代器函数内部
我特别感兴趣的是理解-
-
是因为我将
$('body').append(temp);留在了$.each迭代器函数中，所以DOM将被附加到每次迭代中吗？ -
如果数组中有50个项目的列表，该怎么办？在这种情况下，对于每次迭代，我们是否都会向DOM添加一些内容？
代码
(function() {
var content = [
{
title: "Speak of the devil and he shall appear",
thumbnail: 'images/bane.jpg',
},
{
title: 'Me the joker',
thumbnail: 'images/Joker.jpg',
},
];
var template = $.trim( $('#blogTemplate').html() );
$.each( content, function( index, obj ) { $(content).each(function() {})
var temp =
template.replace( /{{title}}/ig, obj.title )
.replace( /{{thumbnail}}/ig, obj.thumbnail );
console.log(temp);
$('body').append(temp);
});
})();
为了解决这个问题，我认为最好先构建一个字符串，然后将该字符串一次性放入DOM。因此，我创建了一个名为frag的新变量，并将其设置为空字符串。然后，我们将过滤对象数组，对于数组中的每个对象，我们将说frag+=，然后是堆叠的.replace方法，而不是附加到DOM。
var template = $.trim( $('#blogTemplate').html() );
var frag = '';
$.each( content, function( index, obj ) {
frag +=
template.replace( /{{title}}/ig, obj.title )
.replace( /{{thumbnail}}/ig, obj.thumbnail );
console.log(frag);
});
$('body').append(frag);
})();
当我们完成时，我们可以在$.each迭代器函数之外说$('body').append(frag);。
这就引出了我的最后一个问题：
3a。我已经将$('body').append(temp);从$.each函数中移出，这样做是否可以防止DOM在$.each函数的每次迭代中更新？
问题的答案
- 是的，如果在每个块内进行追加，则在每次迭代时都会追加dom
- 是的，对于数组上的50个项中的每一个，您都将操作DOM
- 是的，通过在每个块之外进行append，您只操作了DOM一次
EDIT：此外，如果您想将append保留在每个块内，则应首先从DOM中删除容器元素，对其进行操作，然后将其附加回DOM
- 是的，2。是的，3。是的，这三个问题都如你所料