jQuery循环，只有最后一个ajax成功执行

Question

这就是我的 Chrome 扩展程序的核心 [here] ，[jq 是 jQuery.noConflict()]，jq('.pam div .fbCurrentActionLink') 返回 Facebook 上的每个“Poke”链接。它使用 .each() 循环访问每个人[又名每个人的“poke”链接]，成功后，它会将文本“Poke”替换为粗体绿色“Poke”文本。

function execute()
{
        jq('.pam div .fbCurrentActionLink').each(function () {

        anc=jq(this)
        uid=anc.attr('ajaxify').match(/(\d+)/)[0]

        //ajax
                var post_form_id = jq('#post_form_id').val();
                var fb_dtsg = jq('input[name=fb_dtsg]').val();
                //use AJAX to submit poke, via their fb id
                jq.ajax({
                        type: 'POST',
                        url: 'ajax/poke.php?__a=1',
                        data: 'uid=' + uid + '&pokeback=1&post_form_id=' + post_form_id + '&fb_dtsg=' + fb_dtsg + '&post_form_id_source=AsyncRequest',
                        beforeSend: function(xhr){
                                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
                        },
                        success: function(data, textStatus){
                                anc.html('<b style="color:green !important">Poked</b>');
                        }
                });

        //ajax
        });

}

现在的问题是，假设有 3 个戳要返回。它只会在最后一个上执行.html()。我不明白为什么。

Answer 1

我认为您遇到的问题是，当第一个 ajax 调用完成时，anc 的值已被覆盖。一旦成功事件被触发，anc就等于它在最后一次迭代时的值。为了解决这个问题，您必须阻止值被覆盖，或者在循环期间，您必须将每个 ajax 调用绑定(bind)到将放置结果的元素。

要将 ajax 调用绑定(bind)到 dom 元素，您需要提供定义 ajax 调用的上下文。

尝试一下，我希望它能起作用......

      jq.ajax({
              type: 'POST',
              context: this,        //added line
              url: 'ajax/poke.php?__a=1',
              data: 'uid=' + uid + '&pokeback=1&post_form_id=' + post_form_id + '&fb_dtsg=' + fb_dtsg + '&post_form_id_source=AsyncRequest',
              beforeSend: function(xhr){
                    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
              },
              success: function(data, textStatus){
                    $(this).html('<b style="color:green !important">Poked</b>');  
                    //changed to $(this) instead of anc
              }
      });