How can I randomize elements selected in a JQuery each loop

Question

I have been working on this functionality where I have 5 circles then when a button is clicked they all move down the page one at a time in order. I am trying to get them to go down in a random order. (if not random at least something that doesn't make them fall in order)

JsFiddle: https://jsfiddle.net/n12zj90p/2/

HTML:

<div class="container">

    <button>CLICK</button>

    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
    <div class="circle circle-4"></div>
    <div class="circle circle-5"></div>

</div>

CSS:

.circle{
    width: 40px;
    height: 40px;
    position: absolute;
    background: red;
    border-radius: 100%;
}

.circle-1{ top: 10em; left: 10em; }

.circle-2{ top: 20em; left: 20em; }

.circle-3{ top: 30em; left: 30em; }

.circle-4{ top: 40em; left: 40em; }

.circle-5{ top: 50em; left: 50em; }

button{ padding: 10px 50px; display: table; margin: auto; }

JQUERY:

$(document).ready(function(){
    var $c = $(".circle");

    $("button").click(function(){

        $c.each(function(i, elem){
            $(elem).delay(i * 500).animate({top:"300em"}, { duration: 2000, complete: function(){
                //just something to do after the animation has been completed, you can disregaurd this area
                }
            });//animate end            
        });//each end          

    });
});

possible duplicate of [Randomize a sequence of div elements with jQuery](http://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery) — Popnoodles, Aug 13 '15 at 18:15
also http://stackoverflow.com/questions/5329201/jquery-move-elements-into-a-random-order — Popnoodles, Aug 13 '15 at 18:16
@Popnoodles No I have seen that one, that's a regular javascript loop this is a JQuery each loop. — Lucas Santos, Aug 13 '15 at 18:16
Yes, to shuffle the elements in the jQuery array before using each. — Popnoodles, Aug 13 '15 at 18:18
@LucasSantos why must you use a `jQuery for each loop` why can't u use a plain `loop`? — brso05, Aug 13 '15 at 18:22
@Pointy thats pretty creative, didn't think about that, I will give that a try as well — Lucas Santos, Aug 13 '15 at 18:30

score 3 · Accepted Answer · edited May 23 '17 at 11:58

3

var $c = $(".circle"); is an array. So you just need to randomly shuffle it before doing each on it

function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}

shuffle($c).each(...

Shuffle comes from here

edited May 23 '17 at 11:58

Community

1
1

answered Aug 13 '15 at 18:20

jonasnas

3,540
1
23
32

if you define it as $.fn.shuffle and use this instead of o... you can use it in jquery way: `$c.shuffle().each()` – Joshua K Aug 13 '15 at 18:31
SMH this is virtually the same as the answers in the duplicate questions. – Popnoodles Aug 13 '15 at 18:36
@Popnoodles Yes the shuffling of the array is the same but the way it is used is not. Some people would only understand a solution when used in a different method. But yes you are rite the technical aspect of it is the same but not the way it is being used. – Lucas Santos Aug 13 '15 at 18:56

score 1 · Answer 2 · answered Aug 13 '15 at 18:29

Not sure I deserve any credit for this because it was Pointy's idea, but here's a code that's working and pretty simple:

$(document).ready(function(){
    var $c = $(".circle");

    $("button").click(function(){

        $c.each(function(i, elem){
            var rando_time = Math.floor((Math.random() * 600) + 1);
            $(elem).delay(i * rando_time).animate({top:"300em"}, { duration: 2000, complete: function(){
            //just something to do after the animation has been completed, you can disregaurd this area
            }
            });//animate end            
        });//each end 

    });
});

How can I randomize elements selected in a JQuery each loop

2 Answers2