Блог

У меня есть сайт, на котором вы обновляете страницу, и содержимое внутри блока (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));
  });
  

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

 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>