jquery - How to pass currently iterated element (this) into setTimeout inside .each() function? -

i'm trying iterate through each caption-element inside caption div using each() function, captionin, captionout , delayout attributes, next removeclass of element given in captionout attribute (without checking if class has been added or not) , addclass element given in captionin attribute. that's easy , works perfectly.

next i'm trying reverse whole process of adding , removing classes taken captionin , captionout attributes time delay amount of time given in delayout attribute (by using settimeout() function). , doesn't work.

the whole ide give every iterated element it's own settimeout delay taken delayout attribute.

every complete rookie appreciated :)

html:

<div class="caption">     <div id="1" class="caption-container">           <h1 class="caption-element animated" captionin="fadeinup" captionout="bounceout" delayout="2000">caption 1</h1>     </div>     <div id="2" class="caption-container">           <h1 class="caption-element animated" captionin="swing" captionout="fadeoutdown" delayout="4000">caption 2</h1>           <h1 class="caption-element animated" captionin="bounceinup" captionout="lightspeedout" delayout="3000">caption 2</h1>     </div>     <div id="3" class="caption-container">           <h1 class="caption-element animated" captionin="bounceinup" captionout="rotateoutupleft" delayout="2500">caption 3</h1>     </div> </div> 

jquery

jquery('.caption .caption-element').each(function () {         var captionin = jquery(this).attr('captionin');         var captionout = jquery(this).attr('captionout');         var delayout = jquery(this).attr('delayout');         jquery(this).removeclass(captionout).addclass(captionin);         settimeout(function () {                 jquery(this).removeclass(captionin).addclass(captionout);         }, delayout, captionin, captionout); }); 

ps, ask question in comment before downvoting please, :)

two issues.

1- scope. this not same this in different functions. more this. solved capturing jquery(this) in variable , use across code. therefore, won't give me surprise when want access selected element $elem somewhere else in code.

2- assume settimeout needs number value of time units. passing string.

jquery('.caption .caption-element').each(function() {    var $elem = jquery(this);        var captionin = $elem.attr('captionin');    var captionout = $elem.attr('captionout');    var delayout = $elem.attr('delayout');      console.log("before: " + $elem.attr("class"));    $elem.removeclass(captionout).addclass(captionin);      settimeout(function(captionin, captionout) {        $elem.removeclass(captionin).addclass(captionout);      console.log("after:" + $elem.attr("class"));      }, number(delayout), captionin, captionout);  });

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>  <div class="caption">    <div id="1" class="caption-container">      <h1 class="caption-element animated" captionin="fadeinup" captionout="bounceout" delayout="2000">caption 1</h1>    </div>    <div id="2" class="caption-container">      <h1 class="caption-element animated" captionin="swing" captionout="fadeoutdown" delayout="4000">caption 2</h1>      <h1 class="caption-element animated" captionin="bounceinup" captionout="lightspeedout" delayout="3000">caption 2</h1>    </div>    <div id="3" class="caption-container">      <h1 class="caption-element animated" captionin="bounceinup" captionout="rotateoutupleft" delayout="2500">caption 3</h1>    </div>  </div>

result:

before: caption-element animated before: caption-element animated before: caption-element animated before: caption-element animated after:caption-element animated bounceout after:caption-element animated rotateoutupleft after:caption-element animated lightspeedout after:caption-element animated fadeoutdown