我有一个包含10个元素的数组,在页面加载时有5个div,每个div都会从这个数组中获取一个值,然后使用setInterval()
函数,每1秒钟更新一次剩余数组元素的div值。
问题在于我只想使用一个foreach循环,值从#8开始更新而不是从#6开始,并且最后两个div没有被更新。
示例代码: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>