Question

我有一个JSONP文件正在提取有关场地的数据。

每个场地都会有一个div显示每个场地的信息。

<div class="venue">
  <p class="name"></p>
  <p class="address"></p>
  <p class="phone"></p>
  <p class="tips"></p>
</div>

JS代码：

$.ajax({
        dataType : 'jsonp',
        url      : 'comedy.json',
        jsonp : "callback",
        jsonpCallback: "comedyData",
        success  : function (data) {
            console.log(data);
            for (var i = 0, len = data.length; i < len; i++) {
            var address = data[i].address;
            $('.address').append(address);
                }
            }
        });
    });

我在数组中提取数据，但只需要用其信息填充每个地点。场地1 =姓名，地址，电话......并且每个场地都有显示此信息的DIV。

我试图找到一种方法来制作一个DIV，它将用JSON文件中的30个场地复制自己？因此每个div都有其Venue名称，地址等，但只写一次并填充JSONP文件。

这有意义吗？

Answer 1

我添加了一个容器来添加所有场地：

<div id="venues" />

在内存中创建模板：

for (var i = 0, len = data.length; i < len; i++) {
    var $div = $("<div class='venue'><p class='name' /><p class='address' /><p class='phone' /><p class='tips' /></div>");

    //set data
    $div.find(".name").html(data[i].name);
    $div.find(".address").html(data[i].address);
    $div.find(".phone").html(data[i].phone);
    $div.find(".tips").html(data[i].tips);

    //append to main container
    $("#venues").append($div);
}

Answer 2

如果有很多场地并且性能成为问题，那么您可能要考虑使用clone，因为它看起来会比我发布的内存解决方案更好。

选项1

HTML标记

<div id="venues">
    <div class="venue" style="display:none;">
      <p class="name"></p>
      <p class="address"></p>
      <p class="phone"></p>
      <p class="tips"></p>
    </div>
</div>

jQuery代码

for (var i = 0, len = data.length; i < len; i++) {
    var $div = $(".venue:first").clone();

    //set data
    $div.find(".name").html(data[i].name);
    $div.find(".address").html(data[i].address);
    $div.find(".phone").html(data[i].phone);
    $div.find(".tips").html(data[i].tips);

    $div.removeAttr("style");

    //append to main container
    $("#venues").append($div);
}

编辑 正在考虑更多关于这一点，因为有一个很长的项目列表，所以我创建了一个JavaScript版本（非库依赖），它可以提供更好的性能

选项2

HTML标记

<div id="venues"></div>

JavaScript No Library

var doc = document;

var fragment = doc.createDocumentFragment();

for (var i = 0, len = data.length; i < len; i++) {
    var div = doc.createElement("div");
    div.className += "venue";

    var name = doc.createElement("p");
    name.innerHTML = data[i].name;
    name.className += "name";

    var address = doc.createElement("p");
    address.innerHTML = data[i].address;
    address.className += "address";

    var phone = doc.createElement("p");
    phone.innerHTML = data[i].phone;
    phone.className += "phone";

    var tips = doc.createElement("p");
    tips.innerHTML = data[i].tips;
    tips.className += "tips";

    div.appendChild(name)
       .appendChild(address)
       .appendChild(phone)
       .appendChild(tips);

    fragment.appendChild(div);
}

doc.getElementById("venues").appendChild(fragment);

Answer 3

我认为您可以在javascript中动态创建div和p，以便重复json数据的结果。例如：

in html：

<div id = "venues"></div>

在javascript中：

for (var i = 0, len = data.length; i < len; i++)
{
    var div = document.createElement("div");
    var p1 = document.createElement("p");
    $(p1).html(data[i].name);
    var p2 = document.createElement("p");
    $(p2).html(data[i].address);
    $(div).append(p1);
    $(div).append(p2);
    $("#venues").append(div);
}

使用Jquery + Json创建实例？

3 个答案: