Jquery - 클래스의 모든 요소에 대한 ajax 호출을 보내는 방법

Question

나는 3 개의 행이있는 테이블을 가지고있다. 각 행에는 3 td가 있습니다. 각 행의 처음 2 번째 행에는 기본값이 있습니다. 각 행의 마지막 td에는 값이 없지만 letter라는 속성과 loader라는 클래스가 있습니다. 내 탁자 위에는 버튼이 있습니다. 제가하려고하는 것은 다음과 같습니다. 버튼을 클릭하면 로더 클래스가있는 각 td에 대해 ajax 호출이 전송됩니다. 호출을 통해 전송되는 ajaxData는 속성 문자의 값이어야합니다. 아약스 호출 방법을 알고 있지만 동시에 클래스의 모든 요소에 대해 호출하지는 않습니다. 내가 찾고있는 것을 더 잘 이해하기 위해 jsFiddle을 살펴보십시오. 누군가가 도울 수 있기를 바랍니다. 답장을 미리 보내 주셔서 감사합니다. 건배. 마크.

http://jsfiddle.net/sp6JA/

내 HTML :

<input type="submit" id="load" value="click here to load last td with its attribute called letter" /> 

<table> 
    <tr> 
    <td>td1</td> 
    <td>td2</td> 
    <td class="loader" letter="A"></td> 
    </tr> 
    <tr> 
    <td>td4</td> 
    <td>td5</td> 
    <td class="loader" letter="Q"></td> 
    </tr> 
    <tr> 
    <td>td7</td> 
    <td>td8</td> 
    <td class="loader" letter="M"></td> 
    </tr> 
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

내 JS :

$(document).on({ 
    click: function() { 

     var ajaxData = ""; 

     $.ajax({ 
      type: "POST", 
      url: "myfile.php", 
      data: ajaxData, 
      success: function(return) { 

       $('.loader').html(return); 

      } 
     }); 

    } 

}, "#load");​ 

Answer 1

개별 Ajax 요청, 셀당 하나를 전송하고, 적절한에 다시 응답을 넣어하려는 경우 셀이면 .each() 루프를 사용할 수 있습니다.

$(document).on({ 
    click: function() { 

     $(".loader").each(function() { 
      var $this = $(this), 
       ajaxData = ""; 

      $.ajax({ 
       type: "POST", 
       url: "myfile.php", 
       data: ajaxData, 
       success: function(return) { 
        $this.html(return); 
       } 
      }); 
     }); 
    } 

}, "#load");​ 

루프 내에서 Ajax 성공 핸들러에서 업데이트 할 수 있도록 현재 요소에 대한 참조를 저장해야합니다.