Randomizing the order of divs on page load with jquery?

Question

I'm working on my first website (personal use for my portfolio). I have content in divs, but want them to reorder in randomly each time the page is reloaded. I tried to search for solutions, found a few similar questions, but didn't get anything to work (maybe it's because my content has multiple classes?).

what i have inside the body tags is is:

<div class="box work_self work_all">
<img src="1.jpg' />
</div>
<div class="box work_group work_all">
<img src="2.jpg' />
</div>
<div class="box work_group work_all">
<img src="3.jpg' />
</div>

[...]and so on.

Help is appreciated! Thanks!

*"found a few similar questions, but didn't get anything to work"* Which questions? What exactly have you tried? Are those elements all (and the only children) of the same parent? — Felix Kling, Jan 14 '14 at 20:25
Why are you mixing single and double quotes in your attributes? — Scimonster, Jan 14 '14 at 20:28
Related question: http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — Blazemonger, Jan 14 '14 at 20:30

Michael Stewart · Accepted Answer · 2014-01-16T01:19:46.450

1

The following will get them out of the dom and print them back out randomly.

$(document).ready(function() {
//get list of divs
var div = $(".box").toArray();

//randomly print them back out.
while(div.length > 0) {
    var idx = Math.floor((Math.random() * (div.length-1)));
    var element = div.splice(idx, 1);
    $('body').append(element[0]);
}
});

edited Jan 16 '14 at 01:19

answered Jan 14 '14 at 20:50

Michael Stewart

411
2
7

This works perfectly! Thanks a lot for the help & work! – user3195593 Jan 14 '14 at 22:31
& for the detailed steps, that really helped! – user3195593 Jan 14 '14 at 22:39
Your first step (`div = [];` before overwriting it anyways) and your third step (removing everything – `.empty()`, firstly, and secondly `append`ing things elsewhere removes them from their original location) aren’t necessary. – Ry- Jan 15 '14 at 21:25
@minitech Good point, updated answer. – Michael Stewart Jan 16 '14 at 01:21

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

Try this:

var divs = [];
var divs_shuffle = shuffle($('.box').get());
for(var i in divs_shuffle){
  divs.push(divs_shuffle[i].outerHTML);
}
$('body').html(divs.join(''));

You can find shuffle() function here https://stackoverflow.com/a/6274398/2604607

edited May 23 '17 at 11:49

Community

1
1

answered Jan 14 '14 at 21:27

lashab

186
1
7

score 0 · Answer 3 · answered Jan 14 '14 at 22:59

Sorry for the late, response, I hope this still helps you. Here you have a live fiddle: http://jsfiddle.net/J5z4n/1/ and below you have the source code. You may replace 10 with another number bigger than your number of elements. The idea is to save the innerHTMLs of the target tags and then swap them.

var elements = $("div");
var elementsInnerHtmls = [];
var numberOfElements = elements.length;

for( var i = 0 ; i < numberOfElements ; i++){
    elementsInnerHtmls.push(elements[i].innerHTML); 
}

var checkedIndexes = [];
for( var i = 0 ; i < numberOfElements ; i++){
    var randomIndex = Math.floor(Math.random()*10) % numberOfElements;
    while(checkedIndexes[randomIndex] != undefined){
        randomIndex = Math.floor(Math.random()*10) % numberOfElements;    
    }
    checkedIndexes[randomIndex] = true;
    elements[i].innerHTML = elementsInnerHtmls[randomIndex];    
}

Randomizing the order of divs on page load with jquery?

3 Answers3

Linked