访问$ .getJSON中的DOM元素

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

演示： 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，了解更多信息

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, param：

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