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に追加して、オブジェクト情報を1行にまとめることができます。

しかし、それはすべてのために1つの大きな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"); 
    }); 
});