Question

我正在尝试学习如何在Flickr API中使用JQuery来创建特定集合中的图像幻灯片。

我有图像，我使用以下代码将它们显示在指定div（#images）中的页面上：

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=XXX&photoset_id=PHOTOSETID&extras=url_s&format=json&nojsoncallback=1", function(data) {
    $.each(data.photoset.photo, function(i, photo) {
        var img_src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_m.jpg";
        var a_href = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + photo.id + "/";
        var title = photo.title;
        var alt = ' ';
        $("<img/>").attr("src", img_src).attr("alt", alt).attr("title", title).appendTo("#images").wrap("<li><a href='" + a_href + "' title='" + title + "'></a></li>");
    });
});

但是<li>需要位于<ul>内的<div>内，我无法知道如何做到这一点。

我已经在StackOverflow上看到了其他建议但是当我尝试将其应用到我的代码时，我最终得到了<ul>个或<li>未出现在{<ul>内1}}。

由于

Answer 1

您可以使用jQuery wrapAll()将任何元素包含在#images中的所有内容中。试试这个。

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=XXX&photoset_id=PHOTOSETID&extras=url_s&format=json&nojsoncallback=1", function(data) {
    $.each(data.photoset.photo, function(i, photo) {
        var img_src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_m.jpg";
        var a_href = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + photo.id + "/";
        var title = photo.title;
        var alt = ' ';
        $("<img/>").attr("src", img_src).attr("alt", alt).attr("title", title).appendTo("#images").wrap("<li><a href='" + a_href + "' title='" + title + "'></a></li>");
    });

    //wrap all the li's within #images by ul tag
    $("#images").children().wrapAll('<ul />');

});

.wrapAll()参考 - http://api.jquery.com/wrapAll/

其他替代方法是在将li添加到ul之前创建#images，然后将所有li附加到新创建的ul中。试试这个。

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=XXX&photoset_id=PHOTOSETID&extras=url_s&format=json&nojsoncallback=1", function(data) {
    //Check if ul is present. If not then append a ul into #images
    if($('#images ul').length == 0){
      $('#images').append('<ul />');
    }
    $.each(data.photoset.photo, function(i, photo) {
        var img_src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_m.jpg";
        var a_href = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + photo.id + "/";
        var title = photo.title;
        var alt = ' ';
        $("<img/>").attr("src", img_src).attr("alt", alt).attr("title", title)
        .wrap("<li><a href='" + a_href + "' title='" + title + "'></a></li>")
        .appendTo("#images ul");//Append the li's into ul
    });
});

Answer 2

我没有对此进行测试，但它认为您可以看到很明显您想要使用模板：

模板：

<script id="photoTemplate" type="text/x-handlebars-template">
    {{#each photo}}
    <li>
        <a href="http://www.flickr.com/photos/{{../owner}}/{{id}}" title="{{title}}">
            <img src="http://farm{{farm}}.static.flickr.com/{{server}}/{{id}}_{{secret}}_m.jpg" title="{{title}}">
        </a>
    </li>
    {{/each}}
</script>

JavaScript的：

$.getJSON( 'your_URL', function ( data ) {   
    $( 'ul', '#images' ).html( photoTemplate( data.photoset ) );
});

（您需要handlebars.js脚本来执行此解决方案。）

使用JQuery和JSON feed如何用<ul>标签包装我的列表？</ul>

2 个答案: