i am working on a new Website and we want to shuffle a set of DIV Elements within a Document with a specific Class 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);

My DIV Elements look like this:

<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:[email protected]">e-mail: [email protected]</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:[email protected]">e-mail: [email protected]</a><br>
                        </p>
                    </div>
                </div>
            </div>
         </div>

This is what i call when the site is loaded:

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

The Elements are still arraged in the same way as they are writen in the Document. Where is my error here?

Thanks in advance :)

i am working on a new Website and we want to shuffle a set of DIV Elements within a Document with a specific Class 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);

My DIV Elements look like this:

<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:[email protected]">e-mail: [email protected]</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:[email protected]">e-mail: [email protected]</a><br>
                        </p>
                    </div>
                </div>
            </div>
         </div>

This is what i call when the site is loaded:

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

The Elements are still arraged in the same way as they are writen in the Document. Where is my error here?

Thanks in advance :)

• javascript
• jquery
• html
• css

• $('div#shuffle div').shuffle(); seems to be targeting a div with the ID of shuffle, however shuffle is a class in your HTML. Try $('div.shuffle div') instead maybe? – Toby Commented May 15, 2017 at 12:29
• There are certain downsides to cloning elements such as losing handlers so you really cannot take this approach when shuffling. I am going to give you an example on how to do it, but i will use a simplified version and it is up to you to learn from it and implement it. Posted as answer. – Dellirium Commented May 15, 2017 at 12:51
• and you definitely don't want to shuffle .shuffle div with this markup, more like .shuffle>div. tiny change, major difference – Thomas Commented May 15, 2017 at 13:10

2 Answers 2

Here is an example of how to solve the issue. Learn from it and implement in your own situation.

FIDDLEJS

HTML:

<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>

JS:

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;
}

You can make an array with all the elements and then render them in a separate function. At this point you just need to shuffle the array with something that looks like this:

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

And re-render the parent div.