Question

我有以下代码通过JSON从flickr Feed中拍摄照片，并且我尝试将它们附加到位于另一个div内的div。我可以将所有图片附加到一个div，但我希望将每个图片附加到单独的div。

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=XXXMYKEYXXX&photoset_id=XXXMYSETXXX&extras=original_format&format=json&jsoncallback=?", function(data){
    $.each(data.photoset.photo, function(i,item){
        var photo = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.originalsecret + '_o.jpg';
        /*var longer = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.originalsecret + '_t.jpg';*/
        $('<div class="slideshow-content">').appendTo("#slideshow-holder");
        $('<img/>').attr({src: photo}).appendTo(".slideshow-content");
    });
});

此编辑器似乎删除了标签，因此2个附加内容分别为"div class="slideshow-content"和"img /"。任何帮助将不胜感激。

Answer 1

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=XXXMYKEYXXX&photoset_id=XXXMYSETXXX&extras=original_format&format=json&jsoncallback=?", function(data){
    $.each(data.photoset.photo, function(i,item){
        var photo = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.originalsecret + '_o.jpg';
        $('<img />').attr('src',photo).appendTo("#slideshow-holder").wrap('<div class="slideshow content"/>');
    });
});

或者，只需在附加...

之前构造HTML字符串

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=XXXMYKEYXXX&photoset_id=XXXMYSETXXX&extras=original_format&format=json&jsoncallback=?", function(data){
    $.each(data.photoset.photo, function(i,item){
        var photo = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.originalsecret + '_o.jpg';
        $('<div class="slideshow-content"><img src="'+photo+'"/></div>').appendTo("#slideshow-holder");
    });
});

将图像附加到div

1 个答案: