CODEWITHSUNDEEP
javascriptjqueryarraysshuffle
Cosmindru
Cosmindru

Reputation: 27

How do I take the output from a shuffle function and moves around DOM elements?

So I have this HTML:

 <ul class="deck">
        <li class="card">
            <i class="fa fa-diamond"></i>
        </li>
        .....(16 total list items here)
    </ul>

And this javascript:

const arrayOfCards = $('.card');

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

while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
}
return array;
}
shuffle(arrayOfCards);

That function takes the cards (it's a card memory game) and shuffles them, but it doesn't move around the cards...I need to somehow move the cards around, I don't know how to do it. Should I, instead of having that HTML, create the cards (list items) dynamically from jQuery or what? I'm really confused here.

Upvotes: 1

Views: 658

Answers (2)

Matthew Spence
Matthew Spence

Reputation: 1041

jQuery Solution:

// Add a shuffle() function to extend $() (jQuery) elements.
$.fn.shuffle = function() {
    // Fetch all elements in selection,
    var allElems = this.get(),
        getRandom = function(max) { //temporary function for in-house use
            // return a random value below a max value
            return Math.floor(Math.random() * max);
        },
        //shuffle elements...
        shuffled = $.map(allElems, function(){
            //loop through each element in selection (array)

            // calculate a new random value, which is smaller than the selection size
            var random = getRandom(allElems.length),
            // clone random element in selection (array). this will be the new element at this current point in the array
                randEl = $(allElems[random]).clone(true)[0];
            // remove random element from it's original point in the array
            allElems.splice(random, 1);
            // return this random element, to be positioned at this point in the array. $.map will do this work for us
            return randEl;
       });
    //now we loop through our selection and individually update its order to match our shuffled version
    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });
    // return references to our new shuffled selection
    return $(shuffled);

};

Usage:

var shuffled_selection = $('.deck .card').shuffle();
// select all .card elements under parent elements with class .deck
// and then shuffle the dom (directly). shuffled_selection = final result

Source: https://j11y.io/snippets/shuffling-the-dom/

A Working Example: https://jsfiddle.net/qLyoxhkL/

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

You need to append the sorted array to the dom. What you are currently doing is only sorting an array that happens to contain elements but that sorted array doesn't automatically change the dom

Here's a very simple shuffle approach. 

var $deck = $('.deck'),
  $cards = $deck.children();

$('button').click(function() {
  // sort the elements
  $cards.sort(function() {return Math.random() - .5; });
  // update dom with new sort
  $deck.append($cards);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="deck">
  <li class="card">1</li>
  <li class="card">2</li>
  <li class="card">3</li>
  <li class="card">4</li>
  <li class="card">5</li>
  <li class="card">6</li>
  <li class="card">7</li>
  <li class="card">8</li>
  <li class="card">9</li>
  <li class="card">10</li>
</ul>

<button>Shuffle</button>

Upvotes: 1

Related Questions