jQuery each function parseInt loop

Question

My code is supposed to make a set of divs with classes that start with status- fade out then change the classes from ie status-1 to status-11 by adding 10 the number. Everything is working except that the parseint is looping and the classes are becoming status-179831, status-179832...

$(function disappear(){
    $('[class^="status-"]').delay(5000).fadeOut(400)
    $('[class^="status-"]').each(function(){
        num = $(this).attr('class').split('status-')[1];
        num = parseInt(num, 10) + 10;
        $(this).attr("class", "status-"+num+"");
    })
    $('[class^="status-"]').delay(1000).fadeIn(400)
    disappear();
})

can you add a little DOM to get a better picture of what's going on? — mr rogers
– mr rogers, Commented Nov 9, 2013 at 19:53

jfriend00 · Accepted Answer · 2013-11-09 21:43:55Z

1

To get your operations to work in sequential order, you need to use the completion function of your animations like this:

$(function (){

    function runOne(item) {
        item.delay(5000).fadeOut(400, function() {
            var num = item.attr('class').split('status-')[1];
            num = parseInt(num, 10) + 10;
            item.attr("class", "status-"+num+"")
                .delay(1000).fadeIn(400, function() {runOne(item)});
        });
    }

    // start all the animations    
    $('[class^="status-"]').each(function() {
        runOne($(this));
    });
})

Working demo: http://jsfiddle.net/jfriend00/k7aS7/

As your code was written, the two animations are asynchronous and your .each() loop or the next call to disappear() do not wait for the animations to finish. Using the completion functions like this triggers the next part of your sequence when the animation is done. You also want to always make sure you're using var in front of local variables to avoid accidentally making them global variables.

You can also synchronize a promise object which will guarantee that all the animations always start at the same time on each iteration:

$(function disappear() {
    var all = $('[class^="status-"]');
    all.delay(5000).fadeOut(400, function() {
        var item = $(this);
        var num = item.attr('class').split('status-')[1];
        num = parseInt(num, 10) + 10;
        item.attr("class", "status-"+num+"")
        item.delay(1000).fadeIn(400);
    })
    // when all animations are done, start the whole process over again
    all.promise().done(disappear);
})

Working demo of this option: http://jsfiddle.net/jfriend00/SY5wr/

To restore the class names to the original class name after each iteration, you could do this:

$(function () {
    // save original class names
    var all = $('[class^="status-"]').each(function() {
        $(this).data("origClassName", this.className);
    });

    function disappear() {
        all.delay(5000).fadeOut(400, function() {
            var item = $(this);
            var num = item.attr('class').split('status-')[1];
            num = parseInt(num, 10) + 10;
            item.attr("class", "status-"+num+"")
            item.delay(1000).fadeIn(400);
        })
        // when all animations are done, start the whole process over again
        all.promise().done(function() {
            // restore class names
            all.each(function() {
                this.className = $(this).data("origClassName");
            })
            // run it all again
            disappear();
        });
    }
    // start it
    disappear();
})

Working demo: http://jsfiddle.net/jfriend00/hTmHL/

edited Nov 9, 2013 at 21:43

answered Nov 9, 2013 at 19:59

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

gdev Over a year ago

thanks its working nicely, however how wud i change it back to status-1, status-2... after each fade in fade out?

jfriend00 Over a year ago

@user2974729 - I don't understand what you want to do. Are you trying to restore the original status-xxx class after each iteration?

jfriend00 Over a year ago

@user2974729 - I added an option to my answer that saves/restores the original class name.

Collectives™ on Stack Overflow

jQuery each function parseInt loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related