的JQuery/Ajax调用在for循环

Question

高级程序员，

是否有可能把（ “XXXXX”）。HTML（数据）在for循环中，其中每次 “XXXX” 变量的变化？

我真的觉得我尝试了一切。我正在尝试使用来自每次URL更改的循环Ajax调用的JSONP数据填充HTML表格。每次都使用相同的回调函数，但显然，我会一直覆盖要发送到HTML表标记的数据，因为我无法找出动态更改这些变量的方法。

基本上，我想第一次调用回调函数，将数据存储在类似...

$("#p1_points").html(data_from_ajax_call) 

第二次我想要它做的......

$("#p2_points").html(data_from_ajax_call) 

我已经尝试过愚蠢的东西，像（在一个for循环）做...

$("#p" + i + "_points").html(data_from_ajax_call) 

和各种有趣的东西，但它不接受任何种类的论点......那么，有什么想法？这是微不足道的，我只是过度思考和低于它睡觉？

在此先感谢您的帮助。

更新用于CLARITY

我的Ajax调用这个样子......

for (var i = 0; i < thisweeksraiders.length; i++){ 
    $.ajax({ 
     "url":"http://us.battle.net/api/wow/character/aerie-peak/" + thisweeksraiders[i] + "?jsonp=myCallback", 
     "type":"GET", 
     "data": { fields: "items, professions, talents, progression"}, 
     "dataType":"jsonp", 
     "contentType":"application/json", 
     "jsonpCallback":"myCallback", 
     "success":function(data1){ 
     } 
    }) 
} 

和我的回调函数看起来像这样...

function myCallback(data1) { 
     //itemscounter += 1; 
     var hascloak = "No"; 
     var possupgrades = 30; 
     var offhandequipped = false; 
     var tempupgrades = 0; 
     var tierequipped = 0; 
     for (var i = 0; i < gearlist.length; i++){ 
      if (data1.items[(gearlist[i])].tooltipParams.upgrade) 
       tempupgrades += data1.items[(gearlist[i])].tooltipParams.upgrade.current; 
     } 
     for (var i = 0; i < tierlist.length; i++){ 
      if(data1.items[(tierlist[i])].tooltipParams.set) 
       tierequipped += 1; 
     } 
     if (data1.items.offHand){ 
      tempupgrades += data1.items.offHand.tooltipParams.upgrade.current; 
      offhandequipped = true; 
     } 
     if (offhandequipped) 
      possupgrades = 32; 
     if(data1.items[(gearlist[3])].quality == 5) 
      hascloak = "Yes"; 
     $("#p1_cloak").html(hascloak); 
     $("#p1_tier").html(tierequipped + "/5"); 
     $("#p1_achieve").html(data1.achievementPoints); 
     $("#p1_iLevelE").html(data1.items.averageItemLevelEquipped); 
     $("#p1_upgrades").html(tempupgrades + "/" + possupgrades); 
     var totalnormalkills = 0; 
     var totalheroickills = 0; 
     var furthestboss = null; 
     for (var i = 0; i < soobosslist.length; i++){ 
      totalnormalkills += data1.progression.raids[31].bosses[i].normalKills; 
      totalheroickills += data1.progression.raids[31].bosses[i].heroicKills; 
     } 
     if (totalheroickills == 0){ 
      for (var i = 14; i > 0; i--){ 
       if (data1.progression.raids[31].bosses[i-1].normalKills > 0){ 
        furthestboss = i + "N"; 
        break; 
       } 
      } 
     } 
     else { 
      for (var i = 14; i > 0; i--){ 
       if (data1.progression.raids[31].bosses[i-1].heroicKills > 0){ 
        furthestboss = i + "H"; 
        break; 
       } 
      } 
     } 
     $("#p1_normalkills").html(totalnormalkills); 
     $("#p1_heroickills").html(totalheroickills); 
     $("#p1_xp").html(furthestboss); 
     var classtemp; 
     var colortemp; 
     switch(data1.class){ 
     case 1: classtemp = "Warrior"; colortemp = "#C79C6E"; break; 
     case 2: classtemp = "Paladin"; colortemp = "#F58CBA"; break; 
     case 3: classtemp = "Hunter"; colortemp = "#ABD473"; break; 
     case 4: classtemp = "Rogue"; colortemp = "#FFF569"; break; 
     case 5: classtemp = "Priest"; colortemp = "#FFFFFF"; break; 
     case 6: classtemp = "Death Knight"; colortemp = "#C41F3B"; break; 
     case 7: classtemp = "Shaman"; colortemp = "#0070DE"; break; 
     case 8: classtemp = "Mage"; colortemp = "#69CCF0"; break; 
     case 9: classtemp = "Warlock"; colortemp = "#9482C9"; break; 
     case 10: classtemp = "Monk"; colortemp = "#00FF96"; break; 
     case 11: classtemp = "Druid"; colortemp = "#FF7D0A"; break; 
     } 
     $("#p1_classspec").html("<font color=" + colortemp + "><b>" + data1.name + "</b></font><font size='-1' color=" + colortemp + "><em> (" + data1.talents[0].spec.name + ")</em></font>"); 
     var profstemp = (data1.professions.primary[0].name + " & " + data1.professions.primary[1].name); 
     $("#p1_profs").html(profstemp); 
    } 

所以，基本上，所有的＃p1可以放在函数结尾处的东西，但是我想将它们全部更改为$ p2来填充表格中的下一行。该HTML应该是显而易见的，但在这里它是...

​​

如果按照这个链接，你就会明白我要为（这是不使用for循环）。我只是想大幅减少我的代码。

http://www.mynextbit.com/Pages/Wreckedified/test2.html

一为帕特里克更多更新...

$(document).ready(function(){ 
     for (var i = 0; i < thisweeksraiders.length; i++){ 
      (function(index) 
       window.jsonpCallbacks["myCallback" + index] = function(data){ 
        myCallback(data,index); 
       }; 
     })(i); 
      $.ajax({ 
       "url":"http://us.battle.net/api/wow/character/aerie-peak/" + thisweeksraiders[i] + "?jsonp=jsonpCallbacks.myCallback" + i, 
       "type":"GET", 
       "data": { fields: "items, professions, talents, progression"}, 
       "dataType":"jsonp", 
       "contentType":"application/json", 
       "jsonpCallback":"jsonpCallbacks.myCallback"+i, 
       "success":function(data1){ 
       } 
      }) 
     } 

    }); 

Answer 1

如果循环看起来是这样的：

for(var i=0; i<10; i++){ 
    $.ajax({ 
    // 
    success:function(data){ 
     $("#p" + i + "_points").html(data); 
    } 
    }); 
} 

它不会为i工作最终会被循环中的最后一个i值;你需要像下面

for(var i=0; i<10; i++){ 
    (function(index){ 
     $.ajax({ 
     // 
     success:function(data){ 
      $("#p" + index + "_points").html(data); 
     } 
     }); 
    })(i); 
} 

与i传球沿着闭合将保持数值为这一呼吁。

当然

将有必要存在与IDS 1-10或使用所以无论数量的元素：

<element id="p1_points"> 
<element id="p2_points"> 
<element id="p3_points"> 
... 

EDIT占JSONP回调：

修改myCallBack函数（）为：

function myCallback(data,index) 

，并使用该指数，让您的"#p"+index+"_points"等IDS

，然后用于循环和ajax：

//Keeps track of the callbacks 
//we will prepend 'jsonpCallbacks.' to the callback names 
window.jsonpCallbacks = {}; 

for (var i = 0; i < thisweeksraiders.length; i++){ 
    (function(index){ 
     window.jsonpCallbacks["myCallback"+index] = function(data){ 
     myCallback(data,index); 
     }; 
    })(i); 
    $.ajax({ 
     "url":"http://us.battle.net/api/wow/character/aerie-peak/" + thisweeksraiders[i] + "?jsonp=jsonpCallbacks.myCallback"+i, 
     "type":"GET", 
     "data": { fields: "items, professions, talents, progression"}, 
     "dataType":"jsonp", 
     "contentType":"application/json", 
     "jsonpCallback":"jsonpCallbacks.myCallback"+i, 
     "success":function(data1){ 
     } 
    }) 
} 

Answer 2

如何创建一个#P我第一次那么追加到父。然后更改html（）？

Answer 3

如果您希望定位不同的实体，则每次都应该有不同的回调。

结帐closures，当你准备好了，在那之前尝试这种方式：（伪代码）

for(...) { 
    loadData(i); 
} 


function loadData(i) { 
    var index = i; 

    $.ajax({ 
     url: "", 
     success : function() {  
       $("#p" + index + "_points").html(data_from_ajax_call); 
     } 
    }); 
} 

Answer 4

那么，你至少有两种选择：使用闭包，或使用的forEach（）。

下面的小提琴，包含两者。我会使用闭包解决方案来混淆Java程序员，我认为它更优雅，更有趣。
http://jsfiddle.net/kmiklas/79s8S/4/
打开控制台来查看数据

首先，设定每一行顺序的ID，像这样：

<tr id="row1"></tr> 
<tr id="row2"></tr> 
... 
<tr id="rowN"></tr> 

然后把你的行标识的到一个数组。

var pointsArray = new Array(999); // whatever length here 
for (var i = pointsArray.length; i > -1; i--) { 
    pointsArray[i] = 'row' + i; 
} 

闭幕SOLUTION：

现在，检索您AJAX数据时，产生即时的功能，每次路过我。这将创建一个新的作用域为每个回调：

for (var i = pointsArray.length; i > -1; i--) { 
    (function(j){ 
     $.ajax({ 
      type: "POST", 
      url: "some.php", 
     }) 
     .done(function(data_from_ajax_call) { 
      $('#' + pointsArray[j]).html(data_from_ajax_call) 
     }); 
    })(i); 
} 

的forEach（）解决方案：

您也可以使用Array.prototype.forEach（），“在foreach（）方法，每一次执行提供的函数数组元素“。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

pointsArray.forEach(function(rowName) { 
    $.ajax({ 
     type: "POST", 
     url: "some.php", 
    }) 
    .done(function(data_from_ajax_call) { 
     $('#' + rowName).html(data_from_ajax_call) 
    }); 
} 

我使用jQuery的AJAX调用。我没有测试它们;你必须捣鼓你的data_from_ajax_call变量。也许在这里返回一个JSON对象。