Add class sequentially to a series of elements

Question

I have a series of spans that I want to fade in sequentially. I'm trying to use a for loop to loop through the spans to show them all by adding a class of show (which changes visibility) and using a setTimeout inside the loop to slightly delay the class being added on each span. It seems to only add the 'show' class to the very last span of the div but it tries adding it to the one span 6 times (it console logs the same span class six times).

(I'm using javascript instead of jquery to add class because I get an error that currentSeat.addClass is not a function--another thing I can't figure out)

What am I doing wrong??

Thanks in advance!

var seat = $('.seat-fillup span');
for (var i = 0; i < seat.length; i++) {
  var currentSeat = seat[i];
  setTimeout(function(){
    currentSeat.classList.add('show');
  }, 50 * i);
}

.seat-fillup span {
  visibility: hidden;
}
.seat-fillup span.show {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seat-fillup">
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
</div>

@adeneo I was write an answer that solves the problem, but you close with a duplicated that OP will have troubles to understand. If she can't imagine why this doesn't works, why she will understand the closures with an unrelated example? — Marcos Pérez Gude, Oct 05 '16 at 13:54

Satpal · Accepted Answer · 2016-10-06T05:42:57.460

1

You need to use closure and use .eq() to get the element

jQuery(function($) {
  var seat = $('.seat-fillup span');
  for (var i = 0; i < seat.length; i++) {
    (function(index) {
      setTimeout(function() {
        seat.eq(index).addClass('show');
      }, 500 * index);
    })(i)
  }
})

.seat-fillup span {
  visibility: hidden;
}
.seat-fillup span.show {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seat-fillup">
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
</div>

edited Oct 06 '16 at 05:42

answered Oct 05 '16 at 13:54

Satpal

132,252
13
159
168

Perfect, thanks! Looking into closures and .eq() now, this seems to solve several of my problems. – njpatten Oct 05 '16 at 14:00
1

If you're going to use jQuery, why not -> https://jsfiddle.net/g1by803d/ – adeneo Oct 05 '16 at 14:09

score 0 · Answer 2 · answered Oct 05 '16 at 13:55

0

you wanna do (function(e){setTimeout(function(){ e.classList.add('show'); }, 50 * i);})(currentSeat);

answered Oct 05 '16 at 13:55

Adam

1,342
7
15

Add class sequentially to a series of elements

2 Answers2