Jquery - クラスのすべての要素のAjax呼び出しを送信する方法

Question

私は3行のテーブルを持っています。各列は3 tdを有する。各行の最初の2 tdにはデフォルト値があります。各行の最後のtdには値はありませんが、letterという名前の属性とloaderというクラスがあります。私のテーブルの上にはボタンがあります。私がしようとしているのは以下の通りです。ボタンをクリックすると、ローダークラスを持つtdごとにajax呼び出しが送信されます。呼び出しを介して送信されるajaxDataは、属性文字の値にする必要があります。私はajax呼び出しを行う方法を知っていますが、クラスのすべての要素に対して同時に呼び出しはしません。私が探しているものをより良く理解するために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リクエスト、セルごとに1つずつ送信し、適切に戻した応答を入れたい場合セルを使用する場合は、.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の成功ハンドラから更新できるように、現在の要素への参照を保存する必要があることに注意してください。