append form внутри .getJSON для дочернего элемента

Question

Привет, я использую getJSON для получения информации о видео youtube, и я пытаюсь отобразить его на своем веб-сайте.

$.each($('section'), function() { 
       var video_id = $(this).attr("id"); 


      $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+video_id+'?v=2&alt=jsonc',function(data,status,xhr){ 

       $('.views').append(data.data.viewCount); 

       $('.author').append(data.data.uploader); 

       $('.likes').append(data.data.likeCount); 

     }); 

     }); 

Проблема, с которой я сталкиваюсь, заключается в том, что данные добавляются к каждому классу. Есть ли способ, которым я могу добавить данные только в этот перкулярный раздел.

Answer 1

Используйте find, чтобы спуститься для элемента DOM section, чтобы избежать выбора всех элементов класса в DOM.

$.each($('section'), function() { 
    var video_elem = $(this); 
    var video_id = $(this).attr("id"); 
    $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+video_id+'?v=2&alt=jsonc',function(data,status,xhr){ 
     video_elem.find('.views').append(data.data.viewCount); 
     video_elem.find('.author').append(data.data.uploader); 
     video_elem.find('.likes').append(data.data.likeCount); 
    }); 
});