flickr gallery 지정된 태그에서 사진을로드하는 중

Question

안녕하세요 저는 flickr 갤러리가 있고 div '갤러리'에서 사진을로드하고 싶지만 'data-category'에 정의 된 지정된 태그가있는 두 개의 첫 번째 사진 만로드해야합니다 그 div에.

<div data-category="clouds" class="gallery"></div> 
    <div data-category="mount" class="gallery"></div> 

JS :

나는 HTML을

$('.gallery').each(function(index) { 
    var dataCategory = $(this).attr('data-category'); 
    (function() { 
     var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
     $.getJSON(flickerAPI, { 
      tags : dataCategory, 
      tagmode : "any", 
      format : "json" 
     }).done(function(data) { 
      $.each(data.items, function(i, item) { 
       var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg"); 
       $("<img/>").attr("src", sourceSquare).appendTo(".gallery"); 
       if (i === 1) { 
        return false; 
       } 
      }); 

     }); 

    })(); 

}); 

내가 지금은 모든 '갤러리'div의에 지정된 모든 태그에서 처음 두 사진을로드하는 것입니다이 문제. '갤러리'에는 두 장의 사진을로드해야하지만 '데이터 카테고리'에 지정된 태그 만 사용해야합니다.

Answer 1

당신은 .appendTo(".gallery")라고 말하면 일치하는 모든 요소에 추가됩니다. 당신이 무엇을하려고하는지 이해했다면 현재 outer outer의 .each() 반복에 대한 개별 갤러리 요소를 추가해야합니다. 이 같은

시도 뭔가 :

$('.gallery').each(function(index, el) { // <-- add parameter for current element 
    var dataCategory = $(this).attr('data-category'); 
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
    $.getJSON(flickerAPI, { 
     tags : dataCategory, 
     tagmode : "any", 
     format : "json" 
    }).done(function(data) { 
     $.each(data.items, function(i, item) { 
      var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg"); 
      $("<img/>").attr("src", sourceSquare).appendTo(el); // <-- use el 
      if (i === 1) { 
       return false; 
      } 
     }); 
    }); 
}); 

$.getJSON() 기능은 비동기 있지만 .done() 기능은 여전히 ​​포함 된 함수의 el 매개 변수에 액세스 할 수 있습니다.

(참고 : 나는 즉시-호출 익명 함수를 제거했다가 어떤 값을 추가하는 것 같지 않았기 때문에.)