Рандомизированное содержимое при перезагрузке страницы не зацикливается

Question

У меня есть сайт, на котором вы обновляете страницу, а содержимое внутри поля (div) будет меняться (случайным) при загрузке. Это не только 1 коробка, но и многие другие. Мне удалось получить контент в соответствии с http://codepen.io/anon/pen/GjYNLo?editors=1011, но он дублирует, а не циклирует и применяет различные массивы к каждому основному div. Мне бы хотелось, чтобы каждый ящик отображал один из массивов, когда вы обновляете страницу, содержимое которой будет перемещаться и отображаться где-то еще.

<div class="item small has-text tertiary"> 
    <div class="inner"> 
    <a href="" class=""> 
     <div class="text"> 
     <div class="number"> 
      <span></span> 
     </div> 
     <div class="sub-title"> 
      <span></span> 
     </div> 
     </div> 
    </a> 
    </div> 
</div> 
<br> 
<div class="item small has-text tertiary"> 
    <div class="inner"> 
    <a href="" class=""> 
     <div class="text"> 
     <div class="number"> 
      <span></span> 
     </div> 
     <div class="sub-title"> 
      <span></span> 
     </div> 
     </div> 
    </a> 
    </div> 
</div> 


var text_boxes = [{ 
    number: "2", 
    sub_title: "Marketers", 
}, { 
    number: "75%", 
    sub_title: "Average sales increase", 
}, { 
    number: "4", 
    sub_title: "Developers", 
}, { 
    number: "6", 
    sub_title: "Full Time", 
}, { 
    number: "45", 
    sub_title: "Sites Launched", 
}, { 
    number: "2", 
    sub_title: "Marketers", 
}]; 

var arr3 = []; 

$.each(text_boxes, 
    function(i, el) { 
    setTimeout(function() { 
     arr3.push(el); 
     if (arr3.length === text_boxes.length) { 
     $(".item.has-text", function(ii) { 
      $(this).find('.number span').text(arr3[i].number); 
      $(this).find('.sub-title span').text(arr3[i].sub_title); 
     }); 
     } 
    }, 1 + Math.floor(Math.random() * 5)); 
    }); 

Answer 1

Вы можете получить случайный уникальный контент, как это:

var text_boxes = [{number: "2",sub_title: "Marketers",}, {number: "75%",sub_title: "Average sales increase",}, {number: "4",sub_title: "Developers",}, {number: "6",sub_title: "Full Time",}, {number: "45",sub_title: "Sites Launched",}, {number: "2",sub_title: "Marketers",}], 
 
    len = text_boxes.length, 
 
    uniqueRandoms = [], 
 
    getRandomIndex = function() { 
 
     if (!uniqueRandoms.length) { 
 
     for (var i = 0; i < len; i++) { 
 
      uniqueRandoms.push(i); 
 
     } 
 
     } 
 
     var index = Math.floor(Math.random() * uniqueRandoms.length), 
 
      val = uniqueRandoms[index]; 
 
     uniqueRandoms.splice(index, 1); 
 
     return val; 
 
    }; 
 

 
$('.item.has-text').each(function() { 
 
    var index = getRandomIndex(); 
 
    $(this).find('.number span').text(text_boxes[index].number); 
 
    $(this).find('.sub-title span').text(text_boxes[index].sub_title); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="item small has-text tertiary"> 
 
    <div class="inner"> 
 
    <a href="" class=""> 
 
     <div class="text"> 
 
     <div class="number"> 
 
      <span></span> 
 
     </div> 
 
     <div class="sub-title"> 
 
      <span></span> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="item small has-text tertiary"> 
 
    <div class="'"> 
 
    <a href="" class=""> 
 
     <div class="text"> 
 
     <div class="number"> 
 
      <span></span> 
 
     </div> 
 
     <div class="sub-title"> 
 
      <span></span> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>