Loop throught all divs and update elements

Question

I have one array of 10 elements and on page load there are 5 div and each of them will get an value from this array then using setInterval() the values of the divs will be updated every 1 second from the remaining array elements.

The problem is that I want to use only one foreach loop and the values start to update from #8 not from #6 and the two last divs are not updated.

Fiddle: http://jsfiddle.net/90h7045b/

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  first = data.slice(0, 5),
  second = data.slice(5),
  count = 0;

//update first 5 on page load
$.each($('.wrap'), function(i) {
  $(this).find('.title').html(first[i]);
});

$('#container .wrap:first').addClass('current');

//it does not work with `.wrap`
$.each($('#container'), function() {
  (function($set) {
    var interv = setInterval(function() {
      count++;
      var $cur = $set.find('.current');
      $cur.removeClass('current');

      $cur.find('.title').html(second[count]);
      var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
      $next.addClass('current');
      if(count == 4)
        clearInterval(interv);
    }, 1000);
  })($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="wrap"><div class="title"></div></div>
  <div class="wrap"><div class="title"></div></div>
  <div class="wrap"><div class="title"></div></div>
  <div class="wrap"><div class="title"></div></div>
  <div class="wrap"><div class="title"></div></div>
</div>

Answer 1

You could simplify your code a bit. Do you really need to splice the array twice? Wouldn't it be better to use a variable for your split index and use that? Also, instead of setInterval use setTimeout.

Here is an example:

Fiddle: http://jsfiddle.net/abhitalks/90h7045b/42/

Snippet:

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    $wrap = $(".wrap"), 
    split = 5;

$wrap.each(function (idx) {
    var self = $(this), 
        elem = idx + split,
        timer = ((idx+1) * 1000);
    
    $(this).find('.title').html(data[idx]);
    setTimeout(function () {
        self.find('.title').html(data[elem]);
    }, timer);
});

body { text-align:center; }
.wrap {
    display: inline-block;
    background: #f3f3f3; color: #f8008c;
    padding: 5px; margin:5px; width: 64px; height:64px;
    line-height: 64px; border-radius:37px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="wrap"><div class="title"></div></div>
    <div class="wrap"><div class="title"></div></div>
    <div class="wrap"><div class="title"></div></div>
    <div class="wrap"><div class="title"></div></div>
    <div class="wrap"><div class="title"></div></div>
</div>

Answer 2

I believe what you are wanting is for the divs to display 6 thru 10 after the code completes its execution. A simple solution I found to achieve this was to start your count variable at -2 since your code is starting its updates to late in the loop.

change your initial count variable assignment to the following code:

count = 0;

to:

count = -2;

JsFiddle example: http://jsfiddle.net/larryjoelane/90h7045b/18/