最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin0浏览0评论

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
Add a ment  | 

6 Answers 6

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>

发布评论

评论列表(0)

  1. 暂无评论