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

DEMO :이 같은 Function#bind을 사용하는 것입니다 할 http://jsfiddle.net/8EWvC/4/

Answer 3

한 가지 방법 :

$('.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, PARAM을 사용할 수 있습니다 :