Pass an additional counter as parameter to a callback

I have a $("").load call to get data and dump it into several divs. Each div has a unique ID that I track with an index variable inside a For loop. I do several ajax calls inside this loop. In the call back function I want to use the value of this index again. However by the time the callback executes, the for loop is already finished the index variable always has the top limit开发者_运维知识库 value for the loop.

How can I pass the value to this index to the callback function?

EDIT:

for (var i=1;i<=daysNum;i++)
{


    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + i); 


    var tmd=(tomorrow.getMonth()+1)+'/'+(tomorrow.getDate())+'/'+tomorrow.getFullYear();
    var tmdurl=(tomorrow.getMonth()+1)+'%2F'+(tomorrow.getDate())+'%2F'+tomorrow.getFullYear();

    $("#events").append("<div><div id='event"+i+"'></div><div id='date"+i+"'>"+tmd+"</div></div>");
    $("#event"+i).load(seicalendarurl+"/calendar.aspx?CalendarDate="+tmdurl+"&CalendarPeriod=Day .ms-cal-tdayitem, .ms-cal-alldayevent"

        ,  function (data){
             if($("event"+i).html()=="")
                $("date"+i).html("");

           }
    );

}

---

You can wrap the entier loop body (or only the Ajax part) into an immediate function and pass the index as parameter:

for(var i=1;i<=daysNum;i++) {
    // other stuff
    (function(index) {
        $("#event"+index).load('...', function (){
            if($("#event"+index).html() === "") // you need `#` here too!
                $("#date"+index).empty();       // you need `#` here too!
        });
    }(i));
}

But you don't necessarily need the index. You can access the #eventX element inside the callback with this and the #dateX element is the next sibling. So you can simply do

for(var i=1;i<=daysNum;i++) {
    // other stuff
    $("#event"+index).load('...', function (){
        if($(this).html() === "") {
            $(this).next().empty();
        } 
    });
}

which is much more readable imo.

---

I think the issue is with the load callback function.

You are not missing the "#" before the event and date element selectors.

Try this version for the load callback:

function (data){            
    if($("#event"+i).html()=="")               
        $("#date"+i).html("");           
} 

---

for(var i=0; i<x; i++){
  Ajax(...,function(i) {
    // in callback !
    return function(data) {
      //Work with i:)
    };
  }(i));

---

I couldn't find any better way, but you can send index with ajax request with data parameter and then return it with the response in your callback.

---

You can pass the div unique index as either the div ID, the div's.data() or even in the metadata plugin. Another option is using closures.