Order by random a list of div elements with JS

Question

I have a category that contains more than 200 newsitems, on the homepage I display the last 20 newsitems.

<div class="container-category">
   <div class="col-3">item 1</div>
   <div class="col-3">item 2</div>
   <div class="col-3">item 3</div>
   <div class="col-3">item 4</div>
   <div class="col-3">item ..n</div>
</div>

How to make the list of <div class="col-3"> appear randomly with Javascript ?

OrderBy = random

On the backend not possible, I can only order them with `datetime` or `title` but not with random — MAZ, Nov 23 '19 at 11:49
This tecnique could help you: https://stackoverflow.com/questions/53591691/sorting-an-array-in-random-order — ReSedano, Nov 23 '19 at 12:25

score 3 · Accepted Answer · answered Nov 23 '19 at 12:01

The ideal way to shuffle the categories is through the backend. But incase you can't, we can borrow the shuffle functionality here.

Use jQuery get() to get the array of category divs. Use the function to shuffle the array and use html() to update the content.

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

var categories = shuffle($(".container-category>div").get());
$(".container-category").html(categories);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-category">
  <div class="col-3">item 1</div>
  <div class="col-3">item 2</div>
  <div class="col-3">item 3</div>
  <div class="col-3">item 4</div>
</div>

It works exactly as I've been looking for. Thanks @Eddie – MAZ Nov 23 '19 at 14:04 — MAZ, Nov 23 '19 at 14:04

score 2 · Answer 2 · answered Nov 23 '19 at 13:42

Here I show a variant of Eddie's answer that works without jQuery. The shuffle function:

function shuffle(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}

We can utilize this to shuffle the div's children as follows:

// Get the DOM object of the parent div
const container = document.querySelector('.container-category');

// Turn container.children, which is an HTMLCollection, into an array
// See https://stackoverflow.com/a/222847 for more on this
const children = [...container.children];

// The shuffle function above mutates the argument, so here we shuffle
// the array of children; note that this is not yet reflected in the DOM
shuffle(children);

// Reinsert the children to the parent according to the new order
for (const child of children) {
    container.appendChild(child);
}

zemil · Answer 3 · 2019-11-23T13:02:33.640

My first thought was shuffling of array items but you have the answer also I guess it works slower with big arrays. So I made another solution:

    function getRandIndex(arrayLen) {
      return Math.floor(Math.random() * arrayLen);
    }
    
    function getRandUniqueIndexes(arrayLen, count) {
      const indexes = [];

      while (indexes.length < count) {
        const randIndex = getRandIndex(arrayLen);

        if (!indexes.includes(randIndex)) {
          indexes.push(randIndex);
        }
 
      }

      return indexes;
    }

    // your array with 200 categories
    const categories = Array(200).fill(1).map((_, ndx) => `category-${ndx}`);
    // array with 20 random unique indexes
    const rand20Indexes = getRandUniqueIndexes(categories.length, 20);

    console.log(rand20Indexes.map(catIndex => categories[catIndex]));

Order by random a list of div elements with JS

3 Answers3