ajax脚本中有太多的HTML

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

更新:

根据你的更新，除了所有额外的尾随引号，你不需要添加(一个字符串是一个字符串是一个字符串)，你的代码是好的。

。

$.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)是简单的值(不是对象或数组)，你也不需要前面的''+。

假设您实际上想要连接结果(您现在只保留最后一个成分)，您可以这样做:

。

$.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的内容在您的示例中是相同的，所以您只需要一个字符串。

在本例中，您可能需要在成分之间使用某种形式的分隔符，但是您的示例太模糊了。

。

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

在您的示例中，您在许多不同的文档元素上设置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个"项")。

HTML最初看起来像这样:

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

然后像这样结束(在这个例子中是2 x项):

<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()，尽管你要设置的内容更加复杂。