jquery - jQuery:拉flickr集+获得item.title

我正在尝试从flickr中提取一组图像：

<ul class="thumb">
 <li>
  <p class="artisan-name">item.title</p>
  <img src="item.photo">
 </li>
  ..... as many li's as there are photos in the set
</ul>

到目前为止，我将照片包裹在li中，但是我无法确定我的一生如何使p在ul中的img之前出现。

我到目前为止所拥有的：

<script type="text/javascript">
$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157623815188370&
nsid=12295778@N08&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("#title").html(item.title);
$("<img/>").attr("src", item.media.m).appendTo("ul.thumb")
.wrap("<li>");
});
});
});
</script>
<ul class="thumb"></ul>

最佳答案

var listItems = '';

$.each(data.items, function(i,item){
   // construct the html string
   // do NOT manipulate DOM inside a loop
   // it's to costly
   listItems
       += '<li>'+
            '<p class="artisan-name">'+item.title+'</p>'+
            '<img src="'+item.media.m+'" />'+
          '</li>';
});

// manipulate the DOM only once
// to add all the li elements
$('ul.thumb').append(listItems);

更新：这是完整的代码（已删除评论）

$(document).ready(function() {
    $.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157623815188370&nsid=12295778@N08&lang=en-us&format=json&jsoncallback=?", function(data){
        var listItems = '';
        $.each(data.items, function(i,item){
           listItems
               += '<li>'+
                    '<p class="artisan-name">'+item.title+'</p>'+
                    '<img src="'+item.media.m+'" />'+
                  '</li>';
        });
        $('ul.thumb').append(listItems);
    });
});

关于jquery - jQuery:拉flickr集+获得item.title，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7002948/