¿Puedo pasar $ (esto) a la función de devolución de llamada .getJSON? cualquier solución?

Question

Intenté obtener el valor de rel en cada li y pasarlo a la función .getJSON. Luego quiero agregar el valor thumbnail_url de la devolución de llamada a la etiqueta de imagen de los descendientes li. Mi pregunta es cómo podría pasar el objeto $ (this) a la función de devolución de llamada. Parece que el $ (esto) es nulo.

$('ul.sample li').each(function() { 

     var url = 'http://sampleurl/api/url?' + $(this).attr('rel'); 

     $.getJSON(url, function (data){ 
      $(this).find('img').attr('src') = data.thumbnail_url; 
    }) 
}); 

HTML:

<ul class="sample"> 
    <li rel="value1"> 
     <img src=""> 
    </li> 
    <li rel="value2"> 
     <img src=""> 
    </li> 
</ul> 

Answer 1

Basta con asignar fuera de la devolución de llamada (como yo soy la creación self) y luego su uso dentro de devolución de llamada (haciendo referencia a la variable que ha configurado):

$('ul.sample li').each(function() { 

    var self = $(this); // using self to store $(this) 
    var url = 'http://sampleurl/api/url?' + self.attr('rel'); 

    $.getJSON(url, function (data) { 
     // now retrieving self - it is accessible from the callback 
     self.find('img').attr('src') = data.thumbnail_url; 
    }); 

}); 

La razón de esto es porque this es diferente en la devolución de llamada para .each() que en la devolución de llamada para $.getJSON().

Answer 2

Si utiliza $.ajax en lugar de $.getJSON, se puede utilizar la opción context:

$('ul.sample li').each(function() { 
    var url = 'http://sampleurl/api/url?' + $(this).attr('rel'); 
    $.ajax({ 
     url : url, 
     dataType : 'json', 
     context : this, 
     complete : function (data) { 
      // 'this' will be what you passed as context 
      $(this).find('img').attr('src') = data.thumbnail_url; 
     } 
    }); 
});