javascript – JQuery / Ajax在For循环中调用

高级程序员,

是否可以将(“xxxxx”).html(数据)放在for循环中,其中“xxxx”变量每次都会更改？

老实说,我觉得我已经尝试了一切.我正在尝试用循环ajax调用中的JSONP数据填充HTML表,其中URL每次都会更改.每次都使用相同的回调函数,但显然,我会覆盖要发送到HTML表标签的数据,因为我无法找到动态更改这些变量的方法.

基本上,我希望第一次调用回调函数来存储数据…

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

我想第二次做…

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

我已经尝试过愚蠢的事情(在for循环中)做……

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

和各种有趣的东西,但它不接受任何形式的论点…所以,任何想法？这是微不足道的,我只是过度思考和睡眠不足吗？

在此先感谢您的帮助.

更新清晰度

我的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应该是显而易见的,但这里是……

<body>
<center>
<table width="100%" border="0">
  <tr>
    <td id="p1_classspec">&nbsp;</td>
    <td id="p1_iLevelE">&nbsp;</td>
    <td id="p1_upgrades">&nbsp;</td>
    <td id="p1_cloak">&nbsp;</td>
    <td id="p1_tier">&nbsp;</td>
    <td id="p1_profs">&nbsp;</td>
    <td id="p1_achieve">&nbsp;</td>
    <td id="p1_normalkills">&nbsp;</td>
    <td id="p1_heroickills">&nbsp;</td>
    <td id="p1_xp">&nbsp;</td>
  </tr>
  <tr>
    <td id="p2_classspec">&nbsp;</td>
    <td id="p2_iLevelE">&nbsp;</td>
    <td id="p2_upgrades">&nbsp;</td>
    <td id="p2_cloak">&nbsp;</td>
    <td id="p2_tier">&nbsp;</td>
    <td id="p2_profs">&nbsp;</td>
    <td id="p2_achieve">&nbsp;</td>
    <td id="p2_normalkills">&nbsp;</td>
    <td id="p2_heroickills">&nbsp;</td>
    <td id="p2_xp">&nbsp;</td>
  </tr>
  <tr>
    <td id="p3_classspec">&nbsp;</td>
    <td id="p3_iLevelE">&nbsp;</td>
    <td id="p3_upgrades">&nbsp;</td>
    <td id="p3_cloak">&nbsp;</td>
    <td id="p3_tier">&nbsp;</td>
    <td id="p3_profs">&nbsp;</td>
    <td id="p3_achieve">&nbsp;</td>
    <td id="p3_normalkills">&nbsp;</td>
    <td id="p3_heroickills">&nbsp;</td>
    <td id="p3_xp">&nbsp;</td>
  </tr>
</table>
</center>
</body>

如果你按照这个链接,你会看到我想要的东西(这不是使用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){
                }
            })
        }

    });

解决方法:

如果你循环看起来像这样：

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

它不会起作用,因为我最终会成为循环中的最后一个值;你需要像下面这样的东西

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

关闭以及i的传递将保持该呼叫的数值.

当然需要存在带有1-10的元素或者你使用的任何数字：

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

编辑以解释JSONP回调：

修改myCallback()为：

function myCallback(data,index)

并使用索引使您的“#p”索引“_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){
        }
    })
}