循环遍历所有div并更新元素

Question

我有一个包含10个元素的数组,在页面加载时有5个div,每个都将从此数组中获取一个值,然后使用setInterval()div的值将从其余数组元素每1秒更新一次.

问题是我只想使用一个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>

Answer 1

您可以稍微简化一下代码.你真的需要将阵列拼接两次吗？将变量用于拆分索引并使用它会不会更好？而且,而不是setInterval使用setTimeout.

这是一个例子:

小提琴:http://jsfiddle.net/abhitalks/90h7045b/42/

片段:

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>