javascript - How can i rearrange div 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.

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 Boncut 3,1654 gold badges28 silver badges46 bronze badges

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

Add a ment |

6 Answers 6

Sorted by: Reset to default 6

Simple 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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can i rearrange div order at every reload? - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)