Question

我目前正在使用类似于以下示例（简化版）的for循环将JSON结果写入页面：

var output = "";
for (i in response) {
    var ID = response[i].ID
    var name = response[i].name

    output += "<div id=\""+ID+"\">"+name+"</div>"
}

$("#allResults").html(output);

输出变量变得臃肿＆amp;混乱。是否有任何方法可以在不需要“”的情况下写入输出变量，因为特别难以插入变量＆amp;以后修改代码？

Answer 1

我会尝试使其看起来更“简单”

var allResults = $("#allResults");
for ( i in response ) {
    var ID = response[i].ID,
        name = response[i].name;

    $('<div/>')
        .attr('id', ID)
        .html(name)
        .appendTo(allResults);
}

Answer 2

你真正需要做的是创建DOM元素来表示DOM，而不是代表DOM的字符串。

文档对象模型：页面上元素的记录及其关联值。

要创建元素，jQuery提供了几个快捷方式

span = $("<span>");
div = $("<div >");
anchor = $("<anchor >");
//etc.

要将这些元素相互连接，请使用append。

因此，使用这些，您可以重新创建一些简单的结构

//<div id="hi"></div>
var hi = $('<div>');
hi[0].id = "hi";

//<div id="foo"><span>Bar</span></div>
var foo = $("<div>");
foo[0].id = "foo";
var Bar = $("<span>");
Bar.text("Bar");
foo.append(Bar);

从JSON重新创建结构时，应使用此类型的模式。

var output = $("#allResults");
for (i in response) {
    var pair = $("<div>");
    pair[0].id = response[i].ID;
    pair.text(response[i].name);

    output.append(pair);
}

Answer 3

根据浏览器版本的不同，您可以使用template strings，这样可以获得更易读的代码。在你的情况下：

output += `<div id="${response[i].ID}">${response[i].NAME}</div>`;

注意反引号或反引号` 但是，模板引擎更适合更大的内容。

Answer 4

这个怎么样？：

＆＃13;

var response = [
  { ID: 1, name: "a"},
  { ID: 2, name: "b"},
  { ID: 3, name: "c"},
  { ID: 4, name: "d"}
];
var output = "";
var divElement = "<div id='$id'>$name</div>"
for (i in response) {
    var ID = response[i].ID
    var name = response[i].name
    output += divElement.replace("$id",ID).replace("$name",name)
}

$("#allResults").html(output);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="allResults">
</p>

＆＃13;

Answer 5

尝试以下HandlebarJS模板片段。包括这个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>

车把模板：

<script id="name-template" type="text/x-handlebars-template">
  {{#each people}}
    <div id="{{ID}}">{{name}}.</div>
  {{/each}}
</script>

HTML：

<div class="content-placeholder"></div>

jQuery和模板编译：

$(function () {
  // Grab the template script
  var theTemplateScript = $("#name-template").html();

  // Compile the template
  var theTemplate = Handlebars.compile(theTemplateScript);

  // This is the default context, which is passed to the template
  var context = {
    people: [ 
      { ID: 1000, name: 'Simpson' },
      { ID: 1001, name: 'Griffin' },
      { ID: 1002, name: 'Cartman' },
      { ID: 1003, name: 'McCormick' }
    ]
  };

  // Pass our data to the template
  var theCompiledHtml = theTemplate(context);

  // Add the compiled html to the page
  $('.content-placeholder').append(theCompiledHtml);
});

Answer 6

只需使用单引号即可避免转义，如下所示：

JS Fiddle

output += '<div id="'+ID+'">'+name+'</div>';

Answer 7

尝试JSON.Stringify。

示例：JSON.stringify(data)

在for循环中编写代码

7 个答案: