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對象創建一個鱷梨項目的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"); 
    }); 
});