Javascript 如何基于JSON创建页面节

我想通过JSON url填充jQuery滑块代码。下面是一个JSON示例，我将从它开始：

{
  "Context": null,
  "IsGeneric": false,
  "Items": [
    {
      "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a>",
      "MediaUrl": "\/images\/image1.jpg",
      "AlternativeText": "15+ Excellent High Speed Photographs",
      "Height": 1050,
      "ThumbnailUrl": "\/images\/image1-thb.jpg",
      "Width": 1680
    },
    {
      "Description": "Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a>",
      "MediaUrl": "\/images\/image2.jpg",
      "AlternativeText": "20 Beautiful Long Exposure Photographs",
      "Height": 1050,
      "ThumbnailUrl": "\/images\/image2-thb.jpg",
      "Width": 1680
    },
    {
      "Description": "Liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a>",
      "MediaUrl": "\/images\/image3.jpg",
      "AlternativeText": "35 Amazing Logo Designs",
      "Height": 1050,
      "ThumbnailUrl": "\/images\/image3-thb.jpg",
      "Width": 1680
    },
    {
      "Description": "Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a>",
      "MediaUrl": "\/images\/image4.jpg",
      "AlternativeText": "Create a Vintage Photograph in Photoshop",
      "Height": 1050,
      "ThumbnailUrl": "\/images\/image4-thb.jpg",
      "Width": 1680
    }
  ]
}

{
“上下文”：空，
“IsGeneric”：错误，
“项目”：[
{
“描述”：“Lorem ipsum dolor sit amet，连续的发展精英。不含调味品lacus。Pellentsque ut diam…”，
“MediaUrl”：“\/images\/image1.jpg”，
“备选文字”：“15张以上优秀高速照片”，
“高度”：1050，
“ThumbnailUrl”：“\/images\/image1thb.jpg”，
“宽度”：1680
},
{
“描述”：“leo quam前庭，accumsan nec porttitor a，euismod ac tortor.Sed ipsum lorem，sagittis non egestas id，suscipit…”，
“MediaUrl”：“\/images\/image2.jpg”，
“备选文本”：“20张美丽的长曝光照片”，
“高度”：1050，
“ThumbnailUrl”：“\/images\/image2 thb.jpg”，
“宽度”：1680
},
{
“描述”：“液体发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液发酵液”，
“MediaUrl”：“\/images\/image3.jpg”，
“AlternativeText”：“35个令人惊叹的标志设计”，
“高度”：1050，
“ThumbnailUrl”：“\/images\/image3 thb.jpg”，
“宽度”：1680
},
{
“描述”：“我们的兽人是活兽人，我们的兽人是活兽人，我们的兽人是活兽人，我们的兽人是活兽人，我们的兽人是活兽人，我们的兽人是活兽人，我们的兽人是活兽人，我们的兽人是活兽人，我们的兽人是活兽人，我们的兽人是活兽人。”，
“MediaUrl”：“\/images\/image4.jpg”，
“AlternativeText”：“在Photoshop中创建复古照片”，
“高度”：1050，
“ThumbnailUrl”：“\/images\/image4 thb.jpg”，
“宽度”：1680
}
]
}

我如何将其转换为此

    <div id="featured" >
      <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
      </ul>

    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="images/image1.jpg" alt="" />
         <div class="info" >
            <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
         </div>
    </div>

    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image2.jpg" alt="" />
         <div class="info" >
            <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
            <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
         </div>
    </div>

    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image3.jpg" alt="" />
         <div class="info" >
            <h2><a href="#" >35 Amazing Logo Designs</a></h2>
            <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
         </div>
    </div>

    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image4.jpg" alt="" />
         <div class="info" >
            <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
            <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
         </div>
    </div>

</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。无味调味品。佩伦茨克ut直径

leo quam前庭，accumsan nec porttitor a，euismod ac tortor。同侧脉，非叶矢状脉

埃拉帕特酒。丙氨酸蛋白酶原。无便利。sollicitudin ornare设施酒店

这是一只兽人，但它却活了下来。Donec porta，erat eu pretium luctus，leo augue sodales

从内存中的虚拟元素开始。如果您在内存中构建HTML并一次性将其插入DOM，而不是重复进行DOM写入，整个过程将加快100倍

var myOutput = document.createElement('div')

然后循环遍历数据并将内容附加到“myOutput”中，直到完成

$(myOutput).append(....)

请参阅：

http://api.jquery.com/append/

然后将其附加到页面中：

$('body').append(myOutput)

你应该检查它的答案

---

如果它不适合您，请尝试在谷歌上搜索“Javascript模板”。

您可能需要查看客户端模板机制，例如或。EJS中示例的选项卡部分如下所示：

<% $.each(Items, function(index, item) { %>
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="<%= item.MediaUrl %>" alt="" />
         <div class="info" >
            <h2><a href="#" ><%= item.AlternativeText %></a></h2>
            <p><%= item.Description %></p>
         </div>
    </div>
<% } %>

var Parser = {
    template: '<div class="slide"><img src="{{imgsrc}}" alt="" /><div class="info" ><h2><a href="#" >{{title}}</a></h2><p>{{description}}</p></div></div>',
    compile: function(template, data) {
        template = template.replace(/\{\{imgsrc\}\}/g, data.MediaUrl).replace(/\{\{title\}\}/g, data.AlternativeText).replace(/\{\{description\}\}/g, data.Description);

        return template;
    },
    parse: function(response) {
        var tpl = '', i = 0, len = 0, html = '';
        for(i = 0, len = response.length; i < len; i++) {
            tpl = this.template;
            html += this.compile(tpl, response[i]);
        }

        return html;
    }
};

“alt=”“/>

普通JS：

<script>
var res = {
  "Context": null,
  "IsGeneric": false,
  "Items": [
    {
      "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a>",
      "MediaUrl": "\/images\/image1.jpg",
      "AlternativeText": "15+ Excellent High Speed Photographs",
      "Height": 1050,
      "ThumbnailUrl": "\/images\/image1-thb.jpg",
      "Width": 1680
    },
.
.
.
  ]
}
window.onload=function() {
  var container = document.getElementById("featured");
  for (var i=0, n=res.Items.length;i<n;i++) {
    var item = res.Items[i]
    var div = document.createElement("div");
    div.id = "fragment-"+(i+1);
    div.className="ui-tabs-panel"; 
    div.style="";
    var img = document.createElement("img");
    img.src=item.MediaUrl;
    img.alt=item.AlternativeText
    var innerDiv = document.createElement("div");
    innerDiv.className="info";
    var header = document.createElement("h2");
    var link = document.createElement("a");
    link.href="#";
    link.innerHTML=item.description;
    header.appendChild(link);
    innerDiv.appendChild(header);
    div.appendChild(img);
    div.appendChild(innerDiv);
    container.appendChild(div);
  }
}  
</script>
<div id="featured" >
      <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
      </ul>
</div>

var res={
“上下文”：空，
“IsGeneric”：错误，
“项目”：[
{
“描述”：“Lorem ipsum dolor sit amet，连续的发展精英。不含调味品lacus。Pellentsque ut diam…”，
“MediaUrl”：“\/images\/image1.jpg”，
“备选文字”：“15张以上优秀高速照片”，
“高度”：1050，
“ThumbnailUrl”：“\/images\/image1thb.jpg”，
“宽度”：1680
},
.
.
.
]
}
window.onload=function（）{
var container=document.getElementById（“特色”）；
对于（var i=0，n=res.Items.length；i我为divs部分做了一次尝试。我把它写在我的头上，因此它可能包含拼写错误等，但可以给你一个想法

for (var i=0; i< jsonDesc.length; i++) {
  $("<div>").attr("id", "fragment-"+(i+1))
      .addClass("ui-tabs-panel")
      .append$("<img>").attr("src", jsonDesc[i].Items.MediaUrl)
      .append(
          $("<div>").addClass("info").append(
              $("<h2>")
                  .append("<a>").attr("href", "#").html(jsonDesc[i].Items.AlternativeText)
            )
        );
  if (i>0) {
    $("#fragment-"+(i+1)).addClass ("ui-tabs-hide");
}

for（var i=0；i0）{
$（“#片段-”+（i+1））.addClass（“ui选项卡隐藏”）；
}
签出依赖于jQuery或下划线的模板方法的jqote2




您的json示例需要使用href转义\“

使用下划线的示例

var x = _.template("hello world a is <%= a %>, <% for (var i=0; i < 4; i++) { %> <%= i %>     <% } %>", {a: 77});

var x=ux0.template（“hello world a is，”，{a:77}）；

x；/#=>你好，世界a是77，0 1 2 3
使用，您可以执行以下操作：

<% $.each(Items, function(index, item) { %>
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="<%= item.MediaUrl %>" alt="" />
         <div class="info" >
            <h2><a href="#" ><%= item.AlternativeText %></a></h2>
            <p><%= item.Description %></p>
         </div>
    </div>
<% } %>

var Parser = {
    template: '<div class="slide"><img src="{{imgsrc}}" alt="" /><div class="info" ><h2><a href="#" >{{title}}</a></h2><p>{{description}}</p></div></div>',
    compile: function(template, data) {
        template = template.replace(/\{\{imgsrc\}\}/g, data.MediaUrl).replace(/\{\{title\}\}/g, data.AlternativeText).replace(/\{\{description\}\}/g, data.Description);

        return template;
    },
    parse: function(response) {
        var tpl = '', i = 0, len = 0, html = '';
        for(i = 0, len = response.length; i < len; i++) {
            tpl = this.template;
            html += this.compile(tpl, response[i]);
        }

        return html;
    }
};


如果DOM方法开始变得明显缓慢，您还可以使用完全相同的代码构建相应的HTML，以便插入
innerHTML
（包括注册您定义的任何事件处理程序）。
微软的jQueryTMPL插件。它比自己手动构建DOM元素简洁得多

下面是您的问题的完整实现示例


这会生成您想要的html，但由于缺少图像和css类，看起来不是很好

希望这有帮助。
非常适合这种情况。
查看我用您的示例数据创建的小提琴：

它包含一个基本的模板功能，使得创建html更容易。它使用纯javascript。代码一直保持非常简单，因为目的只是创建一个演示，您可以进一步构建它

解析器代码如下所示：

<% $.each(Items, function(index, item) { %>
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="<%= item.MediaUrl %>" alt="" />
         <div class="info" >
            <h2><a href="#" ><%= item.AlternativeText %></a></h2>
            <p><%= item.Description %></p>
         </div>
    </div>
<% } %>

var Parser = {
    template: '<div class="slide"><img src="{{imgsrc}}" alt="" /><div class="info" ><h2><a href="#" >{{title}}</a></h2><p>{{description}}</p></div></div>',
    compile: function(template, data) {
        template = template.replace(/\{\{imgsrc\}\}/g, data.MediaUrl).replace(/\{\{title\}\}/g, data.AlternativeText).replace(/\{\{description\}\}/g, data.Description);

        return template;
    },
    parse: function(response) {
        var tpl = '', i = 0, len = 0, html = '';
        for(i = 0, len = response.length; i < len; i++) {
            tpl = this.template;
            html += this.compile(tpl, response[i]);
        }

        return html;
    }
};

var解析器={
模板：“{{description}
”，
编译：函数(