使用JQuery和JSON提要如何用<；ul>；标签？

我正在尝试学习如何将JQuery与FlickrAPI结合使用，从特定集合创建图像的幻灯片

我已经获得了图像，并且使用以下代码将它们显示在指定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>");
    });
});​

$.getJSON（“http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=XXX&photoset_id=PHOTOSETID&extras=url_s&format=json&nojsoncallback=1，函数（数据）{
$。每个（data.photoset.photo，函数（i，photo）{
变量img_src=”http://farm“+photo.farm+”.static.flickr.com/“+photo.server+”/“+photo.id+”\u“+photo.secret+”\u m.jpg”；
var a_href=”http://www.flickr.com/photos/“+data.photoset.owner+”/“+photo.id+”/”；
var title=photo.title；
var-alt=''；
$（“”）；
});
});​

但是

需要在

中的

中，我不知道怎么做

我看到了其他关于StackOverflow的建议，但当我尝试将其应用于我的代码时，我发现有几个
或
没有出现在
中

谢谢
您可以使用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 />');

});​

$.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
    });
});​

我还没有对此进行测试，但它认为您可以看到，很明显，您希望为此使用一个模板：

模板：

<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>

（您需要脚本来执行此解决方案。）
您希望为此使用模板…使用HTML创建您的和
！为您的
和$分配一个id。每个函数将数据附加到“my\u ul”！谢谢你，这让我觉得自己很愚蠢，因为解决办法是显而易见的！非常感谢。我正在尝试边做边学，但我想知道是否应该从头开始学习。@bmwell通过向网页添加动态内容可以通过两种方式实现：（1）使用模板，或（2）手动连接HTML字符串。我认为很明显，模板的优越性要高得多。因此，我建议您学习如何使用模板
：）
谢谢，这很有意义，而且我现在更了解如何使用模板。
$.getJSON( 'your_URL', function ( data ) {   
    $( 'ul', '#images' ).html( photoTemplate( data.photoset ) );
});