Question

我正试图从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中，但我无法弄清楚如何让我的生活在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>

Answer 1

使用：

$.each(data.items, function(i,item){
   $("#title").html(item.title);
   var liElem=$('<li/>').append('<p>'+item.title+'</p>');
   $("<img/>").attr("src", item.media.m).appendTo(liElem);
   liElem.appendTo("ul.thumb");
});

为了更好的表现：

<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){
            if(data.items && data.items.length){
                var arrLength=data.items.length,v='',dataHtml='';
                for(var i=0;i<arrLength;++i){
                    v=data.items[i];
                    if(v.media && v.media.m) dataHtml+='<li><p>'+(v.title||'')+'</p><img src="'+v.media.m+'" alt=""/></li>';
                }
                $('ul.thumb').append(dataHtml);
            }
        });
    });
</script>

Answer 2

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：拉动flickr设置+获取item.title

2 个答案: