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 стоять перед img в ul.

что у меня есть до сих пор:

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

json jquery flickr
person isa blanche    schedule 09.08.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward 

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);
    });  
});
person Shef    schedule 09.08.2011
comment
Я попытался добавить его в свою разметку [добавлен var.... сразу после ... function(data){.. ], но это не сработало. Я думаю, что рассуждение, которое вы даете, является более правильным ответом, но не может его реализовать. Спасибо за ваше время! - person isa blanche; 10.08.2011
comment
@isa blanche: Вы должны добавить var listItems = ''; прямо в тот момент, когда я добавляю его, чтобы он работал. Следуйте моему коду, и он обязательно сработает. Тем не менее, вам решать, что лучше всего подходит для вас. Я просто сообщаю вам, что изменение DOM внутри цикла будет чертовски медленным по сравнению с решением, которое я предлагаю выше. - person Shef; 10.08.2011
comment
Извините за отсутствие знаний о jquery, я добавил его туда, где он был у вас, после функции $.getJSON. Я думал, это у тебя там? - person isa blanche; 10.08.2011
comment
Я обновил свой ответ полным кодом. Это должно сработать. - person Shef; 10.08.2011
comment
Большое спасибо! Я очень ценю это. - person isa blanche; 10.08.2011

arrow_upward
2
arrow_downward

Использовать:

$.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>
person Darm    schedule 09.08.2011
comment
Спасибо за ваш быстрый ответ! У меня это почему-то не работает. См.: shop.indegoafrica.org/pages/meet-the-artisans# фрагмент-2 - person isa blanche; 10.08.2011