jquery loop not triggering jquery functions

Question

I searched through stackoverflow and various other sites and can't seem to get an answer to this dilemma.

My aim is to have jQuery functions applied to divs in succession using an array with div id's.

I have the following code that isn't working for some reason:

$(document).ready(function(){
    $('#click').click(function(){ 
        var layout_list = ['1','2','3','4','5','6','7','8','9','10'];
        load_delay = 50;
        for (i = 0; i < layout_list.length; i++ ) {
            load_delay =  load_delay+50;
            setTimeout(function(){
                $("#l_"+layout_list[i]).css("visibility","visible");
                $("#l_"+layout_list[i]).addClass("bounceIn");
            },load_delay);
        }
    });
});

possible duplicate of [setTimeout in a for-loop and pass i as value](http://stackoverflow.com/questions/5226285/settimeout-in-a-for-loop-and-pass-i-as-value) — Ram, Sep 10 '13 at 10:07

score 1 · Accepted Answer · answered Sep 10 '13 at 10:05

1

You have to use a closure, e.g:

for (i = 0; i < layout_list.length; i++) {
    load_delay = load_delay + 50;
    (function (i) {
        setTimeout(function () {
            $("#l_" + layout_list[i]).css("visibility", "visible");
            $("#l_" + layout_list[i]).addClass("bounceIn");
        }, load_delay);
    }(i));
}

answered Sep 10 '13 at 10:05

A. Wolff

74,033
9
94
155

Thanks a lot. I feel like a complete noob now. I have it up and running now. – 404notfound Sep 10 '13 at 10:10

jquery loop not triggering jquery functions

1 Answers1