Question

我从这个page读到，添加很多元素是不好的做法，我应该在循环的每次迭代中构建一个字符串，然后将DOM元素的HTML设置为该字符串。在循环中使用太多HTML是否同样如此？

我有一个解析JSON数据的AJAX脚本。它需要向不同的现有元素添加数据，如下所示：

$.ajax({
    url: "url",
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {        
            var title = item.title,  // A,B,C or D
                age = item.age,
                background = item.background,
                ingredient = item.Ingredient; 
            $('.'+ title+'_ingredient').html(''+ingredient+'')
            $('.'+ title+'_age').html(''+age+'')
            $('.'+ title+'_background').html(''+background+'')
        });
    },
    error: function () {}
});

HTML：

  <div class="A_ingredient"></div>
  <div class="B_ingredient"></div>
  <div class="C_ingredient"></div>
  <div class="D_ingredient"></div>
  <div class="A_age"></div>
  <div class="B_age"></div>
  <div class="C_age"></div>
  <div class="D_age"></div>
  <div class="A_background"></div>
  <div class="B_background"></div>
  <div class="C_background"></div>
  <div class="D_background"></div>

是否有必要先建立一个字符串？如果是的话，你能告诉我怎么做吗？

Answer 1

纯粹是关于处理对html（）的调用所花费的时间，所以他们只是建议你减少调用次数。在这种情况下，您可以在循环中构建它们一次，然后为每个设置div html一次。

更新

根据您的更新，除了您不需要添加的所有额外尾随引号（字符串是字符串是一个字符串），您的代码就可以了。 您只能点击一次。

e.g。

$.ajax({
    url: "url",
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {        
            var title = item.title,  // A,B,C or D
                age = item.age,
                background = item.background,
                ingredient = item.Ingredient; 
            $('.'+ title+'_ingredient').html(ingredient);
            $('.'+ title+'_age').html(age);
            $('.'+ title+'_background').html(background);
        });
    },
    error: function () {}
});

注意：如果您的商品属性（Age, Background, Ingredient）是简单值（不是对象或数组），则您也不需要前导''+。

上

假设你真的想要连接结果（你现在只保留最后一个成分），你可以这样做：

e.g。

$.ajax({
    url: "url",
    success: function (data) {
        var ingredients = '';
        $(data.query.results.json.json).each(function (index, item) {        
            var title = item.title;
            var ingredient = item.Ingredient; 
            ingredients += ingredient;
        });
        $('.aclass').html(ingredients);
        $('.bclass').html(ingredients);
        $('.cclass').html(ingredients);
        $('.dclass').html(ingredients);
    },
    error: function () {}
});

可以减少为：

        $('.aclass,.bclass,.cclass,.dclass').html(ingredients);

每个div的内容在您的示例中都是相同的，因此您只需要一个字符串。

在这种情况下，您可能需要在成分之间使用某种形式的分隔符，但您的示例过于模糊。

e.g。

 ingredients += ingredient + '<br/>';

Answer 2

在您的示例中，您要在许多不同的文档元素上设置HTML。

如果他们以某种方式分组，例如所有在ID为#Container的Div中，您可以构建一个HTML字符串并在其末尾设置整个Div的内容，如下所示：

$.ajax({
    url: "url",
    success: function (data) {
    var sHTML="";
        $(data.query.results.json.json).each(function (index, item) {        
            var title = item.title,
                background = item.background,
                ingredient = item.Ingredient; 
            // not sure what your actual HTML is (div/span/td etc) but somethign like this?
            sHTML+="<div>"; // an opening container for this item
            sHTML+='<div class="'+title+'_ingredient">'+ingredient+'</div>')
            sHTML+='<div class="'+title+'_age">'+title+'</div>')
            sHTML+='<div class="'+title+'_background">'+background+'</div>')
            sHTML+="</div>";
        });
    $("#Container").html(sHTML);
    },
    error: function () {}
});

注意我还没有测试过这段代码，但你很有希望看到校长。

也就是说，构建一个HTML字符串，然后在内容中设置一个元素。我在最近的一个项目中已经做了很多这样的事情，并且没有看到任何速度问题（在我的情况下可能会设置50个＆＃39;项目）。

HTML最初看起来像这样：

<div id="container">
</div>

然后像这样结束（在这个例子中是2个项目）：

<div id="container">
 <div>
  <div class="<sometitle1>_ingredient">ingredient 1</div>
  <div class="<sometitle1>_age">age 1</div>
  <div class="<sometitle1>_background">background 1</div>
 </div>
 <div>
  <div class="<sometitle2>_ingredient">ingredient 2</div>
  <div class="<sometitle2>_age">age 2</div>
  <div class="<sometitle2>_background">background 2</div>
 </div>
</div>

后续调用将使用新值替换元素的内容，替换旧项目。

我想，构建一个字符串比单独在许多元素上设置html（）要少。每次你使用html（）我猜测浏览器必须在某种程度上解决任何连锁效应，例如扩展元素的宽度以适应它，或者事件是否仍然可以像它们那样工作，等等 - 即使实际渲染仅在过程结束时运行。这样你使用html（）一次，虽然你设置的东西更复杂。

希望这有帮助。

ajax脚本中的HTML太多了？

2 个答案:

更新

上

e.g。