Question

我正在过滤一个对象数组，对于数组中的每次迭代，我都会使用一个模板并将其替换为我们当前所在对象的唯一信息（属性）。然后将模板附加到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的新变量，并将其设置为空字符串。然后我们将遍历对象数组，并且对于数组中的每个对象而不是附加到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);

})();

当我们完成时，我们可以在$('body').append(frag);迭代器函数之外说$.each。

这引出了我的最后一个问题：

3A。我已将$('body').append(temp);移出$.each函数，这样做是否阻止了在$ .each函数的每次迭代中更新DOM？

Answer 1

你的问题的答案

是的，如果你在每个区块内做一个追加，那么每次迭代都会附加dom
是的，对于阵列上的50个项目中的每一个，您将操纵DOM
是的，通过在每个块外面添加附加，你只需要操作一次DOM。

编辑：另外，如果你想将append留在每个块中，你应该首先从DOM中删除容器元素，操纵它，然后将它追加到DOM

Answer 2

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

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

2 个答案: