增加对 $.each 的理解——不在每次迭代中附加 DOM答案

【问题标题】：increasing understanding of $.each - not appending the DOM on every iteration增加对 $.each 的理解——不在每次迭代中附加 DOM
【发布时间】：2012-12-04 13:24:20
【问题描述】：

我正在过滤一个对象数组，并且对于数组中的每次迭代，我都使用一个模板并将其替换为我们当前所在对象的唯一信息（属性）。然后将模板附加到 DOM。

请查看第一个代码块，注意代码行 $('body').append(temp); 在 $.each 迭代器函数内

我对理解特别感兴趣 -

是不是因为我在 $.each 迭代器函数中留下了 $('body').append(temp);，所以每次迭代都会附加 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 的新变量并将其设置为一个空字符串。然后我们将过滤对象数组，对于数组中的每个对象，而不是附加到 DOM，我们将说frag+=，然后是堆叠的.replace 方法。

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 函数，这样做是否可以防止在 $.each 函数的每次迭代中更新 DOM？

【问题讨论】：

标签： jquery

【解决方案1】：

你的问题的答案

是的，如果你在 each 块中添加一个 append，则 dom 将在每次迭代时附加
是的，对于数组中的 50 项中的每一项，您都将操纵 DOM
是的，通过在每个块之外进行追加，您只操作了一次 DOM。

编辑：另外，如果你想将追加留在每个块中，你应该首先从 DOM 中删除容器元素，对其进行操作，然后将其追加回 DOM

【讨论】：

【解决方案2】：

是，2. 是，3. 是 - 所有三个问题都符合您的预期。

【讨论】：