Loop through all divs and update elements
I have one array of 10 elements and on page load there are 5 divs and each of them will get a value from that array and then using setInterval()
, the div values will update every 1 second from the rest of the array elements.
The problem is that I only want to use one foreach loop and the values start updating C # 8, not C # 6, and the last two 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>
source to share
You can simplify your code a bit. Do you really need to concatenate the array twice? Wouldn't it be better to use a variable for your split index and use that? Also, setInterval
use instead setTimeout
.
Here's an example:
Fiddle: http://jsfiddle.net/abhitalks/90h7045b/42/
Excerpt
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>
source to share
I believe you want the divs to display 6 to 10 after the code completes. The simple solution I found for this was to run your count variable to -2 as your code runs its updates before the end of the loop.
change the initial assignment of the counter variable to the following code:
count = 0;
in
count = -2;
JsFiddle example: http://jsfiddle.net/larryjoelane/90h7045b/18/
source to share