Используя JQuery и JSON feed, как обернуть мой список тегами <ul>?

Question

Я пытаюсь узнать, как использовать JQuery с Flickr API для создания слайд-шоу изображений из определенного набора.

У меня есть изображения, и они появляются на странице в указанном 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>.

Спасибо

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/

Другой альтернативой является создание ul перед добавлением li в #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 для выполнения этого решения.)