Randomizing 4 div elements in a row Javascript + JQuery

Question

I have 4 div elements in a row (they are cards). I need to mix these divs on every page reflesh. How can I mix them?

I did this:

var random = Math.floor(Math.random() * $(".card").length);
    $(".card")
      .hide()
      .eq(random)
      .show();

But it gives just 1 random div. I need 4 random divs.

Here is the divs:

            <div className="card clubs" ref="card1">
              <img className="img" src={a} alt="a" />
            </div>
            <div className="card diamonds" ref="card2">
              <img className="img" src={b} alt="b" />
            </div>
            <div className="card hearts" ref="card3">
              <img className="img" src={c} alt="c" />
            </div>
            <div className="card spades" ref="card4">
              <img className="img" src={d} alt="d" />
            </div>

Answer 1

What your code does, is choosing the card that will be displayed ("randomly"). If you want to display all the four cards and just shuffle their position, you will have to reposition them randomly.

https://css-tricks.com/snippets/jquery/shuffle-children/

$.fn.shuffleChildren = function() {
$.each(this.get(), function(index, el) {
    var $el = $(el);
    var $find = $el.children();

    $find.sort(function() {
        return 0.5 - Math.random();
    });

    $el.empty();
    $find.appendTo($el);
});

};

Answer 2

You can use something like this:

    var parent = $("#cards"); // Parent container containing '.card' objects
    var cards = parent.children();
    while (cards.length) {
        parent.append(cards.splice(Math.floor(Math.random() * cards.length), 1)[0]);
    }

assuming your cards are wrapped in:

<div id='cards'>
            <div className="card clubs" ref="card1">
              <img className="img" src={a} alt="a" />
            </div>
            <div className="card diamonds" ref="card2">
              <img className="img" src={b} alt="b" />
            </div>
            <div className="card hearts" ref="card3">
              <img className="img" src={c} alt="c" />
            </div>
            <div className="card spades" ref="card4">
              <img className="img" src={d} alt="d" />
            </div>
</div>

Answer 3

randojs.com can handle jQuery elements, so it makes this kinda simple.

//grab shuffled array of jQuery card elements
var shuffledCards = randoSequence($(".card"));

//store their shuffled htmls
var shuffledCardHTMLs = [];
for(var i = 0; i < shuffledCards.length; i++){
    shuffledCardHTMLs[i] = shuffledCards[i].value[0].outerHTML;
}

//replace cards on page with those shuffled htmls
for(var i = 0; i < shuffledCardHTMLs.length; i++){
    $(".card").eq(i)[0].outerHTML = shuffledCardHTMLs[i];
}

This solution does NOT care where on the page the card elements are located; it will handle anything. We store the htmls before we start replacing card elements on the page because we don't want to end up trying to access the html of an element that we've already overwritten. If you want to use this code, just toss this in the head tag of your HTML document first:

<script src="https://randojs.com/1.0.0.js"></script>