Question

我从API获取JSON数据，比如

data = {
  q: 'sugar',
  from: 0,
  to: 10,
  params: {
    sane: [],
    q: [ 'sugar' ]
  },
  more: true,
  count: 1000,
  hits: [{
    recipe: {
      uri: 'http://www.edamam.com/ontologies/edamam.owl#recipe_a46ae0ad4f8320fa6285b25fc7b36432',
      label: 'Bread Pudding with Apple and Brown Sugared Bacon',
      image: 'https://www.edamam.com/web-img/1ae/1ae111af3737d42e9d743445f5605373.JPG   '
    }, 
    recipe: {
      uri: 'http://www.edamam.com/ontologies/edamam.owl#recipe_a36b51f50f102bf5da228af55d2ce040',
      label: 'Vanilla sugar',
      image: 'https://www.edamam.com/web-img/4fd/4fdd2336043aa81dd05a4b6a08934402.jpg',     
    }
  }]
}

我尝试将配方绑定到div。例如，有一个带有id列的div，这是一段代码。

var list = data.hits;
function Builddivs(list) {
  var array = new Array(0);
  var count = list.length;
  for (var i = 0; i < 10; i++) {
    var p = list[i];
    title = p.recipe.label;
    imgurl = p.recipe.image;
    href = p.recipe.url;
    array.push("<div class='pin'><a href='" + href + "'><img src='" + imgurl + "'/></a><p>" + title + "</p> </div>");
  }

  var html = array.join("");
  $("#columns").html(html);
}

问题是生成html需要几秒钟，所以有更好的方法吗？比如将数据直接绑定到现有的动态div数？谢谢！

Answer 1

不是一次生成大量HTML，而是编辑现有HTML会更有效。

Example jsfiddle solution to this question

使用jQuery编辑HTML

您可以替换或添加文本或HTML到div：

$(selector).html('Try <span class="red">this!</span>');
$(selector).text('Just add some text');
$(selector).append('Some HTML');

将src添加到图像或将href添加到链接：

$(selector).attr('src','http://example.com/someimage.jpg');
$(selector).attr('href','http://example.com');

您可以使用javascript Array.forEach或jquery $.each

而不是使用for循环

首次生成HTML

在每次运行时（每次列表更改时），您都可以检查要编辑的HTML元素是否存在。如果没有，那么您可以生成适当的HTML。在第一次运行代码时，将为列表中的每个元素生成HTML。请参阅此问题以了解如何检查元素是否存在： How do you check if a selector matches something in jQuery?

实施例

这是一个有效的jsfiddle，其中包含如何使用$（）。attr和$（）编辑HTML的示例.html：https://jsfiddle.net/fyux250p/1/

Answer 2

 var hitsContent =""
 (list || []).forEach(function(data,index){
    hitsContent += "<div class='pin'><a href='" + data.url + "'><img src='" + data.url + "'/></a><p>" + data.label + "</p> </div>";
 })
 $("#columns").html(hitsContent);

有没有更好的方法将数据绑定到div？

2 个答案:

使用jQuery编辑HTML

首次生成HTML

实施例