Show div's based on a randomly shuffled array using javascript/jquery

Question

Essentially I'm trying to write a Javascript/Jquery script which will show/hide a number of div's one at a time in an order determined by a randomly shuffled series of numbers.

I've managed to get the scripts to shuffle the numbers and cycle through the divs working but I'm not sure how to combine the two.

The script so far looks like this

$(document).ready(function() {

    function shuffle(arra1) {
        var ctr = arra1.length, temp, index;

        // While there are elements in the array
        while (ctr > 0) {
            // Pick a random index
            index = Math.floor(Math.random() * ctr);
            // Decrease ctr by 1
            ctr--;
            // And swap the last element with it
            temp = arra1[ctr];
            arra1[ctr] = arra1[index];
            arra1[index] = temp;
        }

        return arra1;
    }

    var myArray = [0, 1, 2, 3, 4, 5];
    console.log(shuffle(myArray));

    var divs = $('div[id^="random"]').hide(),
        i = 0;

    (function cycle() { 
        divs.eq(i).fadeIn(400)
                  .delay(1000)
                  .fadeOut(400, cycle);

        i = ++i % divs.length;
    })();
});

The div's that I'm trying to cycle through in the HTML look Like this

<div id="random-divs">
    <div id="random0">Div 0</div>
    <div id="random1">Div 1</div>
    <div id="random2">Div 2</div>
    <div id="random3">Div 3</div>
    <div id="random4">Div 4</div>
    <div id="random5">Div 5</div>
</div>

If anyone could point me in the right direction I'd greatly appreciate it.

You want to shuffle once per page load, not before each cycle, right? — Bergi
– Bergi, Commented Dec 7, 2017 at 15:12

Bergi · Accepted Answer · 2017-12-07 15:12:09Z

1

The easiest change would be to replace divs.eq(i) with divs.eq(myArray[i]), taking into account the shuffled positions.

However, instead of shuffling an array with indices, it would in general be easier to understand if you just would shuffle an array with the elements themselves:

var divs = $('div[id^="random"]').hide().toArray()
    i = 0;
shuffle(divs);

(function cycle() { 
    $(divs[i]).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle);

    i = ++i % divs.length;
})();

You might not even need the toArray and $(divs[i]), your shuffle function is generic enough to work on jQuery collections as well.

answered Dec 7, 2017 at 15:12

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CJNotts Over a year ago

Thanks. That works exactly as I need it to. Much obliged to you.

Amit Wagner · Accepted Answer · 2017-12-07 15:25:04Z

$(document).ready(function() {

    function shuffle(arra1) {
        var ctr = arra1.length, temp, index;

        // While there are elements in the array
        while (ctr > 0) {
            // Pick a random index
            index = Math.floor(Math.random() * ctr);
            // Decrease ctr by 1
            ctr--;
            // And swap the last element with it
            temp = arra1[ctr];
            arra1[ctr] = arra1[index];
            arra1[index] = temp;
        }

        return arra1;
    }

    var myArray = [0, 1, 2, 3, 4, 5];
    var shuffledArray = shuffle(myArray);
    console.log(shuffledArray);
    var divs = $('div[id^="random"]');
    
    (function cycle() { 
        var i = shuffledArray.shift();
        if(i === undefined){
          return
        }
        divs.eq(i).fadeIn(400)
                  .delay(1000)
                  .fadeOut(400, cycle);

      
    })();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="random-divs">
    <div style='display:none;' id="random0">Div 0</div>
    <div style='display:none;' id="random1">Div 1</div>
    <div style='display:none;' id="random2">Div 2</div>
    <div style='display:none;' id="random3">Div 3</div>
    <div style='display:none;' id="random4">Div 4</div>
    <div style='display:none;' id="random5">Div 5</div>
</div>

Dalibor · Accepted Answer · 2017-12-07 15:14:56Z

0

Try to update jQuery selector "div[id^="random]" because it also affects the container div with the id "random-divs". I think You dont want to hide container div but just its childrens.

answered Dec 7, 2017 at 15:14

Dalibor

1,1148 silver badges6 bronze badges

1 Comment

CJNotts Over a year ago

Just had that very issue. I've renamed them. Thanks for the input, much obliged.

Collectives™ on Stack Overflow

Show div's based on a randomly shuffled array using javascript/jquery

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related