Loop throught все элементы div и update

Question

У меня есть один массив из 10 элементов и на загрузке страницы есть 5 div, и каждый из них получит значение из этого массива, а затем используя setInterval(), значения div будут обновляться каждые 1 секунду из остальных элементов массива.

Проблема заключается в том, что я хочу использовать только один цикл по каждому элементу и значения начинают обновлять от # 8 не из # 6 и два последних дивы не обновляются.

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

Вы можете упростить ваш код немного. Вам действительно нужно объединить массив дважды? Не лучше ли использовать переменную для вашего индекса разделения и использовать это? Кроме того, вместо setInterval используйте setTimeout.

Вот пример:

Fiddle: 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>

Answer 2

Я считаю, что вы хотели для дивы, чтобы отобразить 6 через 10 после того, как код завершает свое выполнение. Простое решение, которое я нашел для этого, заключалось в том, чтобы запустить вашу переменную count в -2, поскольку ваш код запускает свои обновления до конца цикла.

изменить ваш первоначальный подсчет присваивание переменной на следующий код:

count = 0; 

к:

count = -2; 

JsFiddle Например: http://jsfiddle.net/larryjoelane/90h7045b/18/