AJAX json数据的CSS格式(CSS formatting of AJAX json data)

AJAX json数据的CSS格式(CSS formatting of AJAX json data)

我正在使用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中，以便我可以将对象信息组合在一行中。

然而，它只是为一切创造一个大的分额。 我究竟做错了什么？

I am using jquery to make a call to a hardcoded json file. Each json object has name, image, and description.

I need to make the page display each json as a listed item as displayed in the below mockup image.

page mockup

Here is my script file:

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

and the HTML where I am trying to load the json data:

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

I am trying to create a div of avocado-item for each json object. Then I am trying to append its subsequent data (name, image, description) into the div so that I can the objects information together in one line.

However it is only creating one big div for everything. What am I doing wrong?

最满意答案

按照您所做的方式创建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"); }); });

Creating HTML the way you have done is very inefficient. This is a more simple version of your code that should do what you are after.

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