For loop won't pass i variable to Jquery function inside the loop

Question

I've a for-loop and it won't pass it's i variable or any kind of a variable into Jquery function coded to run with every loop.

for (var i = 0; i < result.length; i++) {
    $('#frame-' + i + '').fadeOut(function () {
        ALERT(i);
        document.getElementById('frame-' + i + '').getElementsByTagName('img')[0].src = 'img/' + result.cat[i].id + '.png';

    });
    $('#frame-' + i + '').fadeIn();

}

I found that I can use .on or .bind functions but I've no idea how it should be done with fadeOut().

fadeOut.on() won't work.

Any suggestions to get this working?

@DipeshParmar that's not the issue though as i is out of scope in the callback. — Rory McCrossan
– Rory McCrossan, Commented Oct 24, 2013 at 11:07
possible duplicate of Javascript closure inside loops - simple practical example — Bergi
– Bergi, Commented Oct 24, 2013 at 11:30

MrCode · Accepted Answer · 2013-10-24 11:23:04Z

3

The problem is by the time your fadeOut completes, the for loop has already completed and as such, the value of i that the fade code is reading, will always be the same (the last value).

Create a closure to pass the value of i. This gives you a local copy of i which won't be overwritten by the for loop. Also change ALERT() to alert() (Javascript is case sensitive).

for (var i = 0; i < result.length; i++) {
    (function(i){
        $('#frame-' + i).fadeOut(function () {
            alert(i);
            document.getElementById('frame-' + i + '').getElementsByTagName('img')[0].src = 'img/' + result.cat[i].id + '.png';

        }).fadeIn();
    })(i);
}

answered Oct 24, 2013 at 11:23

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-10-24 11:08:15Z

2

Closure again!!!

$.each(result, function (i, res) {
    $('#frame-' + i + '').fadeOut(function () {
        alert(i);
        $(this).find('img').get(0).attr('src', 'img/' + res.cat.id + '.png');
    }).fadeIn();
})

answered Oct 24, 2013 at 11:08

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

For loop won't pass i variable to Jquery function inside the loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related