javascript - 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");
  });
});