我能把$(this)传递给.getJSON回调函数吗？有什么解决方法吗？

Question

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

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

- seanbun

---

语法错误：意外的标识符（unexpected_token_identifier） - Musa

JavaScript 闭包再次出击！ - Spencer Ruport

除了原来的问题，你还有另一个问题：应该是 var url = 'http://sampleurl/api/url?'+$(this).attr('rel');。 - Steve

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;
    });

});

那是因为在 .each() 的回调函数中和 $.getJSON() 的回调函数中，this 指向的对象不同。

- Tadeck

---

@Steve：你说得对，我确实复制了原帖的代码，并改正了无法运行的部分。 - Tadeck

那是哪个公约？虽然我也用“那个”，但是我看到过that和self这两个变量在很多地方都有使用。jQuery本身在各个地方都使用self。 - Steve

我参考了《JavaScript权威指南》这本书：http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742 - Glenn Ferrie

@GlennFerrieLive，恕我直言，Crockford并不总是正确的。实际上，在实践中，你会看到self和that同样被用来指代this。我更喜欢使用self，因为它与this在语法上更接近，比that更易懂、更易读。 - josh3736

我从未见过self，但没有规定。你可以随意编写。 - Glenn Ferrie

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;
        }
    });
});

- bfavaretto

---

这两个函数 $.ajax() 和 #.getJSON() 之间还有其他主要的区别吗？ - seanbun

嗯，$.ajax 更冗长，正如您所见。在此示例中，我传递了使其的行为与 getJSON 完全相同所需的选项，但是还有许多其他选项可用。$.get、$.post 和 $.getJSON 基本上都是 $.ajax 的包装器。 - bfavaretto