Question

有没有办法重新安排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>

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

Answer 1

像这样简单

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

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

Answer 2

请参阅：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代码

Answer 3

另一个片段：

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);

Answer 4

这样的东西？

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++;
}

Answer 5

我假设你有一个包含订单的数组，如下所示： 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>

你应该如何继续下去：从结尾到开始遍历数组，并在每个div前面添加相应的id到'container'div：

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

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

享受！

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

Answer 6

<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>`   
});

如何在每次重新加载时重新排列div顺序？

6 个答案: