Javascript ajax脚本中的HTML太多？

我从中了解到，附加很多元素是不好的做法，我应该在循环的每次迭代中构建一个字符串，然后将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 () {}
});

$.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:

---

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

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

更新： 根据您的更新，除了所有不需要添加的额外尾随引号（string就是string就是string），您的代码仍然可以正常运行每个项目只命中一次。

e、 g

注意：如果您的物品属性（

Age、Background、component

）是简单值（不是对象或数组），则您也不需要前导的

'+

以前的 假设您确实想要连接结果（目前只保留最后一种成分），您可以执行以下操作：

$.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 () {}
});

$.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 () {}
});

例如 可简化为：

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

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

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

e、 g

配料+=配料+”
；

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

如果以某种方式对它们进行分组，例如将它们全部放在ID为容器的Div中，则可以构建一个HTML字符串，并在其末尾设置整个Div的内容，如下所示：

$.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 () {}
});

$.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 () {}
});

$.ajax({
url:“url”，
成功：功能（数据）{
var sHTML=“”；
$（data.query.results.json.json）
var title=item.title，
background=item.background，
成分=项目。成分；
//不确定您的实际HTML是什么（div/span/td等），但是类似这样的东西？
sHTML+=“”；//此项的打开容器
sHTML+=''+成分+''）
sHTML+=''+标题+''）
sHTML+=''+背景+''）
sHTML+=“”；
});
$（“#Container”）.html（sHTML）；
},
错误：函数（）{}
});

注意，我还没有测试过这段代码，但是您很有希望看到它的原理

也就是说，构建一个HTML字符串，然后在内容的末尾设置一个元素。 在最近的一个项目中，我做了很多这方面的工作，但没有发现任何速度问题（在我的案例中，可能需要设置50个“项目”）

HTML最初看起来如下所示：

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

然后像这样结束（本例中为2 x项）：

成分1
1岁
背景1
成分2
2岁
背景2

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

我可以想象，构建一个字符串比单独在许多元素上设置html（）要轻。每次使用html（）时，我猜浏览器都必须在某种程度上解决任何连锁反应，例如扩展元素的宽度以适应它，或者事件是否仍能像它们那样工作，等等，即使实际渲染仅在过程结束时运行。通过这种方式，您只需使用一次html（），尽管您的设置更加复杂

---

希望这能有所帮助。

如果这些元素有一个父节点，您可以更新父html一次，而不是更新元素htmlWhen您将空字符串与变量连接到另一个空字符串@T.J.克劳德，是的，这是我的意图。我正在构建一个比较表，允许人们比较一组固定的项目，因此有必要用新的迭代替换旧内容。@user35295:您的响应意味着JSON数据中只有一个条目，否则您只显示最后一个条目。哪个是正确的？@T.J.Crowder@TrueBlueAussie。啊，我意识到例子中的错误。我已经更新了示例。我将

item.title

作为类选择器，以确保每个项都发布在表中的不同单元格中。我知道示例中的错误。我已经做了一些修改，使用

item.title

作为每个元素的类。希望我现在保留我的第一批代码（每个条目一个字符串）。。。将更新：）很抱歉这个坏例子。我应该在发布之前仔细考虑一下。在上看到了更糟糕的情况：）谢谢。我猜你的建议只有在元素不存在的情况下才有效，不是吗？但是在我的例子中，所有的div元素实际上都存在，我正在尝试用新的内容替换旧的内容。嗨，不用担心-不，它将完全替换#Container div的内容，因此如果重复调用，它将工作。HTML将包含新的item元素，因此当您在最后执行.HTML（）时，具有相同类型/类等但内容不同的新元素将替换旧元素。我会把我的答案写得更清楚

<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>