Is there a way of rearanging div order? More exact how can i get from
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
this
<div id="3"></div>
<div id="1"></div>
<div id="4"></div>
<div id="2"></div>
or any other order at every reload.
Is there a way of rearanging div order? More exact how can i get from
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
this
<div id="3"></div>
<div id="1"></div>
<div id="4"></div>
<div id="2"></div>
or any other order at every reload.
Share Improve this question asked Jan 9, 2013 at 14:41 Dan Ovidiu BoncutDan Ovidiu Boncut 3,1654 gold badges28 silver badges46 bronze badges 3- Show what you have tried, and give more specifics (random, set specific new order etc.) I leave the mind reading to those capable of it. – Mark Schultheiss Commented Jan 9, 2013 at 14:44
- if i use math.random() isn't a chance to have two divs with same id for example? – Dan Ovidiu Boncut Commented Jan 9, 2013 at 14:47
- It's not correct to use same id for two elements. – Chuck Norris Commented Jan 9, 2013 at 15:18
6 Answers
Reset to default 6Simple like this
$("#parent").html($("#parent").children().sort(function() { return 0.5 - Math.random() }));
Here is working example http://jsfiddle/CPQXw/1/
See this: http://jsfiddle/KfY4u/
$("div.container div").sort(function(){
return Math.random()*10 > 5 ? 1 : -1;
}).each(function(){
var $t = $(this);
$t.appendTo( $t.parent() );
});
And this works for any number of div
tags
An other snippet:
http://jsfiddle/t8gU7/
var $divs = $('#container div');
for(var j, x, i = $divs.length; i; j = parseInt(Math.random() * i), x = $divs[--i], $divs[i] = $divs[j], $divs[j] = x);
$('body').append($divs);
Something like this?
var ids = [], max = 4, i = 0, rand = 0;
while(i < max){
do{
rand = Math.floor(Math.random() * max);
} while(ids.indexOf(rand) < 0)
ids.push(rand);
i++;
}
I will assume you have an array with the order, like this: var order = [3, 1, 4, 2]; Now, I will assume that you have a container div for your divs, like this:
<div id="container">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
How you should proceed is this: go through the array from the end to the start, and prepend each div with corresponding id to the 'container' div:
$(document).ready(function() {
var order = [3, 1, 4, 2];
for(var i=order.length-1; i>=0; i--) {
$('#container').prepend($('#'+order[i]));
}
});
Enjoy!
EDIT: my understanding of the question is how to rearrange the divs not how to generate a new random order! Sorry if I missed the point, but that is what you asked in your question.
Vanilla Javascript ES6 is the best thing to do this task. Implementation is based on provided HTML structure.
let divs = document.querySelectorAll("div");
let randomDiv = Array.from(divs).sort(() => {
return 0.5 - Math.random();
});
document.body.innerHTML = "";
randomDiv.map((x) => {
document.body.innerHTML += `<div
id=${x.id}>${x.textContent}</div>`
});
<body>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
</body>