javascript - 我可以将 $(this) 传递给 .getJSON 回调函数吗？任何解决方法？

Question

我试图在每个 li 上获取 rel 的值并将其传递给 .getJSON 函数。然后，我想将回调中的 thumbnail_url 值添加到 li 后代的图像标签中。我的问题是如何将 $(this) 对象传递给回调函数。似乎 $(this) 为空。

$('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

只需在回调之外分配它（就像我正在设置self），然后在回调内部使用（通过引用您设置的变量）：

$('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;
    });

});

原因是因为this在回调中.each()与在回调中不同$.getJSON()。

Answer 2

如果您使用$.ajax而不是$.getJSON，您可以使用以下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;
        }
    });
});