AJAX json 数据的 CSS 格式

Question

我正在使用 jquery 来调用一个硬编码的 json 文件。每个 json 对象都有名称、图像和描述。

我需要让页面将每个 json 显示为列出的项目，如下面的样机图像所示。

页面模型

这是我的脚本文件：

$(function() {
$.ajax(
{
  url: 'javascripts/avocado.json',
  data: {}
}).done(function(response) {
console.log(response);
for (var i = 0; i < response.length; i++) {
  $('#avocado-list').append('<div class="avocado-item"></div>')
  $('.avocado-item').append('<h2>' + (i + 1) + '</h2>');
  $('.avocado-item h2').addClass("avocado-number");
  $('.avocado-item').append('<img src="../images/' + response[i].img + '">');
  $('.avocado-item').append('<div><h3>' + response[i].name + '</h3>' + '<p>' + response[i].description + '</p></div>');
  $('.avocado-item h3').addClass("avocado-title");
}
}).fail(function() {
console.log("error");
}).always(function() {
console.log("complete");
});
});

以及我尝试加载 json 数据的 HTML：

<section id="avocado-list" class="list"></section>

我正在尝试为每个 json 对象创建一个 avocado-item 的 div。然后我尝试将其后续数据（名称、图像、描述）附加到 div 中，以便我可以将对象信息放在一行中。

但是，它只是为所有内容创建一个大 div。我做错了什么？

Answer 1

以您的方式创建 HTML 效率非常低。这是您的代码的更简单版本，应该可以满足您的需求。

$(function() {
  $.ajax({
    url: 'javascripts/avocado.json',
    data: {}
  }).done(function(response) {
    console.log(response);
    var listMarkup = '';

    for (var i = 0; i < response.length; i++) {
      listMarkup += '<div class="avocado-item"><h2 class="avocado-number">' + (i + 1) + '</h2><img src="../images/' + response[i].img + '"><div><h3 class="avocado-title">' + response[i].name + '</h3>' + '<p>' + response[i].description + '</p></div></div>';
    }

    $('#avocado-list').append(listMarkup);
  }).fail(function() {
    console.log("error");
  }).always(function() {
    console.log("complete");
  });
});