이 객체 참조가 $ .each 내부에서 작동하지 않음

Question

왜 foo가 추가되지 않습니까?

$.ajax({ 
       type: 'GET', 
       dataType: 'json', 
       cache: false, 
       url: 'barfoochakalaka', 
       success: 
        function(response) { 
         $.each(response, function(index, val) {        
          $(this).parent().parent().append('foo'); 
         }); 

        } 
}) 

Answer 1

내부 each 때문에, this는 이상 반복되는 현재 요소 (docs), 그래서 일반적으로 우리가 전자 전에 뭔가 다른 것으로 this을 정의로 설정 each 루프 nter :

var that = this; 
$.each(response, function(index, val) { 
    var content = '<div class="link-history">'+ val.date + ', ' + val.userid + ', ' + val.status + '</div>'; 
    $(that).parent().parent().append('foo'); 
}); 

그러나 이 상황은 Ajax 요청의 success 콜백에서 this 때문에, 요청하지 당신이 후하고있는 DOM 요소를 발사 jqXHR 개체와 같은지 var that = this을 더 멀리 이동해야합니다.

var that = this; 
$.ajax({ 
    type: 'GET', 
    dataType: 'json', 
    cache: false, 
    url: 'barfoochakalaka', 
    success: function(response) { 
     $.each(response, function(index, val) { 
      var content = '<div class="link-history">' + val.date + ', ' + val.userid + ', ' + val.status + '</div>'; 
      $(that).parent().parent().append('foo'); 
     }); 

    } 
}) 

Answer 2

응답은 배열이 아니라 문자열 일 수 있습니다. 요소에 대한 응답을 할당 한 다음 .each()를 수행하기 전에 해당 요소에있는 모든 어린이를 잡아 선택기를 사용해보십시오

Answer 3

var $this = $('#Selector').parent().parent(); 
$.ajax({ 
       type: 'GET', 
       dataType: 'json', 
       cache: false, 
       url: 'barfoochakalaka', 
       success: 
        function(response) { 
         $.each(response, function(index, val) { 
          var content = '<div class="link-history">'+ val.date + ', ' + val.userid + ', ' + val.status + '</div>'; 
          $this.append('foo'); 
         }); 

        } 
}) 

---

편집 :

원래의 선택에 .parent().parent()을 추가, 당신 때문에 각 루프이 호출되지 않습니다

Answer 4

귀하의 응답이 요소의 객체가 아닌, 그것은 가장 가능성이 가능성이 당신의 선택기로 문자열 목록의 (?) 그건 경우는 $($(this))를 사용합니다.