How to insert incremented variable into jquery object with each function

Question

I am in trouble to insert incremented value with each function Here is the code

var rfi = 250;
$('.animate_rfi').each(function() {     
    $(this).appear(function() { 
        $(this).delay(rfi).animate({
            opacity : 1,
            right : "0px"
        }, 1500);

    });

    rfi += 50;
}); 

I want to increase value for delay(rfi) in each time each() executes. How can I get this.

Answer 1

The each function in jQuery already handles an index over iteration with the first parameter (https://api.jquery.com/each/). I modified your code to handle it. You were not really specific with what you wanted, but the handles an increase of 50 ms at each pass, the first pass being at 250 ms of delay.

var rfi = 250;
$('.animate_rfi').each(function(i) {     
$(this).appear(function() { 
    $(this).delay(rfi + (i * 50)).animate({
        opacity : 1,
        right : "0px"
    }, 1500);

});

//rfi += 50;
}); 

Answer 2

check your selectors or variable or use .ready() for your code this is working fine for me :

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

js :

var num = 0;
$("ul li").each(function(){
num = num+1;
})
alert(num)

http://jsfiddle.net/nE6Q6/