将json数据输入li

时间:2012-10-09 08:49:11

标签: jquery json html-lists append

我有一些Json数据,其中包含具有某些相关值的产品图像。我想获取json数据,将其存储在'li'中并使用jquery附加到某个div。请告诉我如何将图像附加到li。这是Json数据

  

{“url”:“1.jpg”,“color”:“Yellow”,“Item”:“Item A”,“sold_out”:“1”},{“url”:“2.jpg” ,“color”:“Red”,“Item”:“Item B”,“sold_out”:“0”},{“url”:“3.jpg”,“color”:“Green”,“Item”: “Item D”,“sold_out”:“0”},{“url”:“4.jpg”,“color”:“Red”,“Item”:“Item A”,“sold_out”:“1”} ,{“url”:“5.jpg”,“color”:“Blue”,“Item”:“Item B”,“sold_out”:“0”}

3 个答案:

答案 0 :(得分:2)

使用$.each遍历json并将其附加到html元素(li)。

示例( 未经过测试

$.each(data, function(key, val) {
    $("ul").append("<li><img src=\"https://path/" + data[key].url+ "\" /></li>");
});

data是json数组。 希望它有所帮助。

答案 1 :(得分:1)

将图像附加到列表

var myImageSrc = "1.jpg";
var myList = $('#mylist');
myList.append('<li><img src="' + myImageSrc + '" /></li>');

答案 2 :(得分:0)

这是一个JSFiddle,用于您想要的内容更新 http://jsfiddle.net/Rm4vE/4/