Question

我有一个json文件，其中包含来自特定文件夹的所有链接图像，如

["http://img1.png","http://img2.png","http://img3.png","http://img4.png"]

我想创建一个<ul>列表，但我不知道如何。有人可以用一个小例子来帮助我吗？

由于

Answer 1

var urls = ["http://img1.png","http://img2.png","http://img3.png","http://img4.png"];

var ul = $('<ul>');

for (var i = 0; i < urls.length; i++) {
    var li = $('<li>');
    li.appendTo(ul);
    $('<img>').attr('src', urls[i]).appendTo(li);
}

var container = $('#container');
container.append(ul);

Answer 2

使用json，您可以连接http://shared1.ad-lister.co.uk/GetImagesList.aspx?contextId=c9d56aca-506c-40be-9068-037d0fba62c9&Folder=_design/car-marques

$.post("http://shared1.ad-lister.co.uk/GetImagesList.aspx?contextId=c9d56aca-506c-40be-9068-037d0fba62c9&Folder=_design/car-marques", function (json) {

    var html = '<ul>';
    for (var i = 0; i < json.length; i++) {
        html += '<li><img src="'+json[i]+'" /></li>';
    }
    html += '</ul>';

    $('.contents').html(html);
});

Answer 3

假设您已将其解析为数组arr，您可以执行以下操作：

var ul = $('<ul/>').append(arr.map(function(i) {
    return '<li><img src="'+i+'" /></li>';
}).join());

arr为["http://img1.png","http://img2.png","http://img3.png","http://img4.png"]

的位置

Answer 4

试试这个

var arr_images = ["http://img1.png","http://img2.png","http://img3.png","http://img4.png"];

var html = '<ul>';
for(var i=0; i<arr_images.length; i++)
{
   var img_url = arr_images[i];
   html += '<li>';
   html += '<img src="'+img_url+'" />';
   html += '</li>';
}
html += '</ul>';

document.getElementById('your_div_id').innerHTML = html;

Answer 5

您可以使用jQuery API的map函数

var json = ["http://img1.png","http://img2.png","http://img3.png","http://img4.png"]
var div ='<ul>';
json.map(function (text){ 
    div += '<li><img src="'+ text + '" /></li>'
  });
div += '</ul>'

$("containerSelector").append(div)

如何显示JSON单级菜单

5 个答案: