Randomize the order of DIV elements inside another DIV

Question

Randomize the order of DIV elements inside another DIV

I am currently in the process of developing a new website, and we are looking to randomize a group of DIV elements within a document that have a specific class called 'shuffle':

(function($){

$.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });

    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });

    return $(shuffled);

};

})(jQuery);

The structure of my DIV elements is as follows:

<div class="row animate-in shuffle" data-anim-type="fade-in-up">
            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                <div class="team-wrapper">
                    <div class="team-inner" style="background-image: url('assets/img/team/1.jpg')">
                        <!-- <a href="#" target="_blank" > <i class="fa fa-twitter" ></i></a> -->
                    </div>
                    <div class="description">
                        <h3> Test User 1</h3>
                        <h5><strong> Tester - Inhaber </strong></h5>
                        <p>
                            fon: 1234567890<br>
                            <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe8a9b8d8abe8a9b8d8ad09a9b">[email protected]</a>">e-mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe8a9b8d8abe8a9b8d8ad09a9b">[email protected]</a></a><br>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                <div class="team-wrapper">
                    <div class="team-inner" style="background-image: url('assets/img/team/2.jpg')">
                        <!-- <a href="#" target="_blank" > <i class="fa fa-twitter" ></i></a> -->
                    </div>
                    <div class="description">
                        <h3> Test User 2</h3>
                        <h5><strong> Tester </strong></h5>
                        <p>
                            fon: 0987654321<br>
                            <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee9a8b9d9a8b9cdcae9a8b9d9ac08a8b">[email protected]</a>">e-mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="493d2c3a3d2c3b7b093d2c3a3d672d2c">[email protected]</a></a><br>
                        </p>
                    </div>
                </div>
            </div>
         </div>

Here's how I initiate the shuffling on page load:

$('div#shuffle div').shuffle();

Despite implementing the shuffle function, the elements remain in the same order as they appear in the document. Can anyone point out where I might be going wrong?

Appreciate any insights provided :)

javascript jquery html css

Answer 1

Answer №1

Let's explore a solution to the problem at hand. Take inspiration from this example and adapt it to fit your specific needs.

Check out the code on FIDDLEJS

HTML Code:

<div id="container">
  <div class="shuffleMe"> DIV 1</div>
  <div class="shuffleMe"> DIV 2</div>
  <div class="shuffleMe"> DIV 3</div>
  <div class="shuffleMe"> DIV 4</div>
  <div class="shuffleMe"> DIV 5</div>
  <div class="shuffleMe"> DIV 6</div>
</div>
<button onclick="shuffle()">
  SHUFFLE
</button>

JavaScript Code:

function shuffle() {
  var container = document.getElementById("container");
  var elementsArray = Array.prototype.slice.call(container.getElementsByClassName('shuffleMe'));
    elementsArray.forEach(function(element){
    container.removeChild(element);
  })
  shuffleArray(elementsArray);
  elementsArray.forEach(function(element){
  container.appendChild(element);
})
}

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

Answer 2

Let's explore a solution to the problem at hand. Take inspiration from this example and adapt it to fit your specific needs.

Check out the code on FIDDLEJS

HTML Code:

<div id="container">
  <div class="shuffleMe"> DIV 1</div>
  <div class="shuffleMe"> DIV 2</div>
  <div class="shuffleMe"> DIV 3</div>
  <div class="shuffleMe"> DIV 4</div>
  <div class="shuffleMe"> DIV 5</div>
  <div class="shuffleMe"> DIV 6</div>
</div>
<button onclick="shuffle()">
  SHUFFLE
</button>

JavaScript Code:

function shuffle() {
  var container = document.getElementById("container");
  var elementsArray = Array.prototype.slice.call(container.getElementsByClassName('shuffleMe'));
    elementsArray.forEach(function(element){
    container.removeChild(element);
  })
  shuffleArray(elementsArray);
  elementsArray.forEach(function(element){
  container.appendChild(element);
})
}

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

Answer 3

Answer №2

If you want to randomize the order of elements in an array, one approach is to create an array with all the elements and then use a function to shuffle them. Here's an example of how you can achieve this:

function shuffleArray(array) {
    for (let i = array.length; i; i--) {
        let j = Math.floor(Math.random() * i);
        [array[i - 1], array[j]] = [array[j], array[i - 1]];
    }
}

After shuffling the array, you can re-render the parent container to display the elements in their new randomized order.

Answer 4

If you want to randomize the order of elements in an array, one approach is to create an array with all the elements and then use a function to shuffle them. Here's an example of how you can achieve this:

function shuffleArray(array) {
    for (let i = array.length; i; i--) {
        let j = Math.floor(Math.random() * i);
        [array[i - 1], array[j]] = [array[j], array[i - 1]];
    }
}

After shuffling the array, you can re-render the parent container to display the elements in their new randomized order.

Randomize the order of DIV elements inside another DIV

Answer №1

Answer №2

Similar questions

Which HTML tags can be activated with JavaScript to be interactive?

Overflowing dropdown menus on a dynamic navigation bar

Having trouble with uploading a file through ajax

Can you please advise me on where I should send this request?

Leverage the router through the getServerSideProps method

Full options in Bootstrap Selectpicker are not being displayed

Incorporate CSS styling within a PHP document

jQuery show/hide function malfunctioning

Guide on crafting a query with typeorm query builder to extract specific data from the database

An error cannot be captured within the map function in Javascript

Set up a function to run for the first time using window.setInterval after a two-second delay, and then continue to

Interfacing Node JS with Java Web Services via SOAP

Ways to .focus() on input field while using Modals in Bootstrap

Serialization in .NET and the weekcalendar: events that are not defined

The issue of border-radius and shadow box inconsistency

Using THREE.js in the pre-render function

Updating ng-model upon paste command in Safari browser encountering issues

"Effortlessly search and replace text with a click of a button using jQuery - A beginner

Achieving victory through res.send

What is the best way to emphasize a label upon clicking a radio button?