Randomize Data Displayed

Randomize data displayed using jQuery.

by Julian Ritchey

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="story-container">
  <div class="story">
    <a href="#"><img src="#" alt="some text 1"></a>
    <h4>Story Title 1</h4>
  </div>
  <div class="story">
    <a href="#"><img src="#" alt="some text 2"></a>
    <h4>Story Title 2</h4>
  </div>
</div>
<div class="story-container">
  <div class="story">
    <a href="#"><img src="#" alt="some text 3"></a>
    <h4>Story Title 3</h4>
  </div>
  <div class="story">
    <a href="#"><img src="#" alt="some text 4"></a>
    <h4>Story Title 4</h4>
  </div>
</div>

JavaScript

var cards = $(".story");
for (var i = 0; i < cards.length; i++) {
  var target1 = Math.floor(Math.random() * cards.length - 1) + 1;
  var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
  cards.eq(target1).before(cards.eq(target2));
}