变量在循环的最后迭代中变得不确定

Question

I have a application where I am getting route info from one location to another, possibly between multiple locations. In my function, I'm looping over checked locations and writing out the directions to the page with jQuery. On the last iteration of the loop the 'myRoute' variable becomes undefined. So, if I have three locations, it bombs on the third, but if I use those same three and add a fourth, the first three works and the fourth bombs. I traced the behavior in Firebug, and while the myRoute variable does get filled properly, as soon as it moves to the next line, it is all of a sudden undefined. I removed instances of myRoute and replaced with directionResult.routes[0].legs[i] but still got the undefined error. What's going on here?

function setInstructions(directionResult, idname, start) {
//clean tour list
$('#tours_list .tour').remove();
$('#routeTitle').show();
var checkboxArray = $(".selector.Favs" + idname).find("li");
var idx = 0;

var linkMap = $('#routeTitle').find('.link-map')[0];
linkMap.href = __mapLink+'saddr=' + start;
var firstStop = true;
//iterate selected properties
for (var i = 0; i < checkboxArray.length; i++) {
    var curChk = checkboxArray[i];
    if ($(curChk).hasClass('active')) {        
        //get steps
        var myRoute = directionResult.routes[0].legs[i]; //this is what becomes undfined
        var title = $('<div>').addClass('mileage').append($('<p>').append($('<strong>').html(myRoute.distance.text + "<br /> about " + myRoute.duration.text)));
        var ol = $('<ol>').addClass('directions');
        for (var j = 0; j < myRoute.steps.length; j++) {
            var step = myRoute.steps[j];
            var li = $('<li>').append($('<div>').addClass('direction').html(step.instructions));
            li.append($('<div>').addClass('distance').html(step.distance.text + " - " + step.duration.text));
            ol.append(li);
        }                      
        //add tour with directions
        $('#tours_list').append(temp);          
    }
}

}

Answer 1

The issue is that the array in directionResult.routes[0].legs is not as long as checkboxArray.length so your code is trying to access beyond the end of directionResult.routes[0].legs and thus gets undefined .

It isn't helping you that you are testing for only active class items because i goes from 0 to checkboxArray.length - 1 regardless.

---

I don't follow exactly what you're trying to do, but you might be able to work around this by only iterating the items that have .active in the first place so i never goes beyond the number of active items. You might be able to do that by changing this:

var checkboxArray = $(".selector.Favs" + idname).find("li");

to this:

var checkboxArray = $(".selector.Favs" + idname).find("li.active");

And, then remove the if check for the active class. This will make it so your index i never goes higher than the number of active items.

---

You could also just keep a counter of the active items you've processed and use that counter to index into directionResult.routes[0].legs[cntr] instead of using i .