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>

https://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery — demkovych, Dec 11 '19 at 16:50

score 0 · Answer 1 · answered Dec 11 '19 at 16:57

0

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

};

answered Dec 11 '19 at 16:57

Patrick Fopa

44
2

Hi. It did not work. I updated my code (added divs). Didn't work on img either. – zicxor Dec 11 '19 at 17:12
Can you post the HTML code here? Your divs/cards should be children of the same parent, on which you will execute the above `shuffleChildren` on DocumentReady – Patrick Fopa Dec 11 '19 at 18:24
I am using React. I tried your code like this: https://paste.ubuntu.com/p/KQ6NzcG7Sk/ – zicxor Dec 11 '19 at 18:32

jbargu · Accepted Answer · 2019-12-11T17:52:31.350

0

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>

edited Dec 11 '19 at 17:52

answered Dec 11 '19 at 16:58

jbargu

86
4

Hi. It did not work. Cards lined up on the bottom. I updated my code (added divs). Didn't work on img either. – zicxor Dec 11 '19 at 17:15
@zicxor I assumed your cards are wrapped into `
`. See edited answer.
– jbargu Dec 11 '19 at 17:53
Almost :) Now the cards are stuck together. In my opinion, the cards are mixed, but they stick together. – zicxor Dec 11 '19 at 18:07
I am not sure I understand. What do you mean stuck together? – jbargu Dec 11 '19 at 18:15

score 0 · Answer 3 · answered Dec 11 '19 at 22:41

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>

Randomizing 4 div elements in a row Javascript + JQuery

3 Answers3