페이지를 다시로드 할 때 임의의 내용이 반복되지 않음

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>