如何对数组进行排序并用HTML包装每个？

Question

JSON看起来像这样：

[{"title":"Modern\/Contemporary House of mine.","link":"http:\/\/buildworx-mc.com\/forum\/showthread.php?tid=1718","images":["http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/house1.png","http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/House2.png","http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/House3.png","http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/House4.png","http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/House5.png","http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/House6.png"]}

我可以获得标题和链接。但是我无法获得图像，因为在某些图像中有多个链接。

我正在尝试将每个图片链接包装为HTML。

$.getJSON("gallery/getScreenshots.php", function (data) {
    $.each(data, function (i, image) {
      var link = image.link, title = image.title. images = image.images;

    $img = $('<img>').attr('src', images);
    $('#screenshots').append($img);

   });

但结果如下：

<img src="http://i1139.photobucket.com/albums/n555/xDJBOUTIx/house1.png,http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House2.png,http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House3.png,http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House4.png,http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House5.png,http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House6.png" alt="">

如何对数组进行排序并将每个图像追加到<img>?

中

Answer 1

使用$.each循环：

$.each(images, function(i,el) {
    $('#screenshots').append($('<img>',{'src',el}));
});

Answer 2

Hell Trippy，

这是以下代码和正在运行的演示here。

var info=[
    {
        "title": "Modern/Contemporary House of mine.",
        "link": "http://buildworx-mc.com/forum/showthread.php?tid=1718",
        "images": [
            "http://i1139.photobucket.com/albums/n555/xDJBOUTIx/house1.png",
            "http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House2.png",
            "http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House3.png",
            "http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House4.png",
            "http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House5.png",
            "http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House6.png"
        ]
    }
];
var album=info[0]["images"];
for(i=0;i<album.length;i++)
{  console.log(album[i]);
  $('#screenshots').append($('<img>').attr('src', album[i])                                    
                      .css({'width':'200px','height':200px'}));
}