0

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

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

我特别有兴趣了解 -

  1. 是因为我在迭代器函数$('body').append(temp);内部留下了 DOM 将被附加到每次迭代中吗？$.each

  2. 如果数组中有一个包含 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 的新变量并将其设置为一个空字符串。然后我们将通过对象数组进行过滤，并且对于数组中的每个对象，而不是附加到我们将要说的 DOMfrag+=后面是堆叠的.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？

4

2 回答 2

1

你的问题的答案

  1. 是的，如果您在 each 块内进行附加，则 dom 将在每次迭代时附加
  2. 是的，对于数组上的 50 个项目中的每一个，您都将操纵 DOM
  3. 是的，通过在每个块之外进行附加，您只操作 DOM 一次。

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

于 2012-12-04T13:48:25.087 回答
0
  1. 是的，2. 是的，3. 是的 - 所有三个问题都符合您的预期。
于 2012-12-04T13:45:57.293 回答