0

有没有办法重新排列 div 顺序？更确切地说我怎么能从

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

这

<div id="3"></div>
<div id="1"></div>
<div id="4"></div>
<div id="2"></div>

或每次重新加载时的任何其他订单。

4

6 回答 6

6

像这样简单

$("#parent").html($("#parent").children().sort(function() { return 0.5 - Math.random() }));

这是工作示例http://jsfiddle.net/CPQXw/1/

于 2013-01-09T15:01:08.973 回答
3

看到这个：http: //jsfiddle.net/KfY4u/

$("div.container div").sort(function(){
    return Math.random()*10 > 5 ? 1 : -1;
}).each(function(){
    var $t = $(this);
    $t.appendTo( $t.parent() );   
});

这适用于任意数量的div标签

于 2013-01-09T14:52:29.797 回答
2

另一个片段：

http://jsfiddle.net/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);
于 2013-01-09T14:57:54.687 回答
1

像这样的东西？ 

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++;
}
于 2013-01-09T14:55:49.100 回答
1

我将假设您有一个带有顺序的数组，如下所示： var order = [3, 1, 4, 2]; 现在，我假设你的 div 有一个容器 div，如下所示：

<div id="container">
  <div id="1"></div>
  <div id="2"></div>
  <div id="3"></div>
  <div id="4"></div>
</div>

你应该如何进行：从头到尾遍历数组，并将每个具有相应 id 的 div 前置到“容器”div：

$(document).ready(function() {
  var order = [3, 1, 4, 2];

  for(var i=order.length-1; i>=0; i--) {
    $('#container').prepend($('#'+order[i]));
  }
});

享受！

编辑：我对这个问题的理解是如何重新排列 div 而不是如何生成新的随机顺序！抱歉，如果我错过了重点，但这就是您在问题中提出的问题。

于 2013-01-09T14:56:51.617 回答
0 
<body>
  <div id="1">1</div>
  <div id="2">2</div>
  <div id="3">3</div>
  <div id="4">4</div>
</body>

Vanilla Javascript ES6 是完成这项任务的最佳选择。实现基于提供的 HTML 结构。

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>`   
});
于 2018-03-20T09:21:42.913 回答