Question

我正在开发一个迭代某些DOM元素的应用程序，并为每个元素执行Ajax请求。问题是我无法访问回调函数中的每个DOM元素。

$('.class').each(function() {
    $.getJSON(url, function(data) {
        $(this).attr('id', data.id); // $(this) is not accessible
    });
});

有没有办法解决这个问题？

Answer 1

您应该使用变量，因为每个函数调用的this值都会发生变化，而$ .getJSON this的回调内部不再是元素。

$('.class').each(function() { 

    var self = this;

    $.getJSON(url, function(data) {
        self.id = data.id;
    });
});

另一个选项是each()

中的内置参数

$('.class').each(function(index, element) { 
    $.getJSON(url, function(data) {
        element.id = data.id;
    });
});

Answer 2

您可以这样做，而不必执行任务。

$.getJSON(url, function(data) {
  $(this).attr('id', data.id); // $(this) is accessible
}.call(this));

DEMO：http://jsfiddle.net/8EWvC/4/

Answer 3

一种方法是使用Function#bind，如下所示：

$('.class').each(function() {
    $.getJSON(url, function(data) {
        $(this).attr('id', data.id);
    }.bind(this)); // Pass `this` into the getJSON and now `this` should be the DOM element
});

这样做的是，无论你传入bind的是什么，都会在函数内设置为this。您可以阅读MDN here

了解更多信息

Answer 4

您可以将选择器缓存在类似它的变量中：

$('.class').each(function() {
   var $this = $(this); // cache it here
   $.getJSON(url, function(data) {
      $this.attr('id', data.id); // $(this) is not accessible
   });
});

或者如果您可以将$.getJson()更改为传统$.ajax()，那么您可以使用context:this,参数：

$('.class').each(function() {
   $.ajax({
      url : url, 
      dataType: 'json',
      context: this,
      success: function(data) {
          this.id = data.id; // $(this) is not accessible
      }
   });
});

访问$ .getJSON中的DOM元素

4 个答案: