使用jquery在页面加载时随机化div的顺序？ [复制]答案

【问题标题】：Randomizing the order of divs on page load with jquery? [duplicate]使用jquery在页面加载时随机化div的顺序？ [复制]
【发布时间】：2014-02-03 02:03:13
【问题描述】：

我正在开发我的第一个网站（个人用于我的作品集）。我在 div 中有内容，但希望它们在每次重新加载页面时随机重新排序。我试图搜索解决方案，发现了一些类似的问题，但没有任何工作（可能是因为我的内容有多个类？）。

我在正文标签中的内容是：

<div class="box work_self work_all">
<img src="1.jpg' />
</div>
<div class="box work_group work_all">
<img src="2.jpg' />
</div>
<div class="box work_group work_all">
<img src="3.jpg' />
</div>

[...]等等。

感谢您的帮助！谢谢！

【问题讨论】：

“找到了一些类似的问题，但没有任何工作” 哪些问题？你到底试过什么？这些元素是否全部（以及唯一的子元素）都属于同一个父元素？
为什么要在属性中混用单引号和双引号？
相关问题：stackoverflow.com/questions/2450954/…
@Scimonster - 有些男人只想看着世界燃烧

标签： jquery html random

【解决方案1】：

下面将把它们从 dom 中取出并随机打印出来。

$(document).ready(function() {
//get list of divs
var div = $(".box").toArray();

//randomly print them back out.
while(div.length > 0) {
    var idx = Math.floor((Math.random() * (div.length-1)));
    var element = div.splice(idx, 1);
    $('body').append(element[0]);
}
});

【讨论】：

这很完美！非常感谢您的帮助和工作！
& 详细步骤，真的很有帮助！
您的第一步（div = []; 在无论如何都覆盖之前）和您的第三步（删除所有内容 - .empty()，首先，其次是 appending 其他地方的东西将它们从原始位置删除）是'没有必要。
@minitech 好点，更新的答案。

【解决方案2】：

试试这个：

var divs = [];
var divs_shuffle = shuffle($('.box').get());
for(var i in divs_shuffle){
  divs.push(divs_shuffle[i].outerHTML);
}
$('body').html(divs.join(''));

你可以在这里找到 shuffle() 函数https://stackoverflow.com/a/6274398/2604607

【讨论】：

【解决方案3】：

抱歉，回复晚了，希望对您有所帮助。在这里你有一个现场小提琴：http://jsfiddle.net/J5z4n/1/ 和下面你有源代码。您可以将 10 替换为大于您的元素数量的另一个数字。这个想法是保存目标标签的innerHTML，然后交换它们。

var elements = $("div");
var elementsInnerHtmls = [];
var numberOfElements = elements.length;

for( var i = 0 ; i < numberOfElements ; i++){
    elementsInnerHtmls.push(elements[i].innerHTML); 
}

var checkedIndexes = [];
for( var i = 0 ; i < numberOfElements ; i++){
    var randomIndex = Math.floor(Math.random()*10) % numberOfElements;
    while(checkedIndexes[randomIndex] != undefined){
        randomIndex = Math.floor(Math.random()*10) % numberOfElements;    
    }
    checkedIndexes[randomIndex] = true;
    elements[i].innerHTML = elementsInnerHtmls[randomIndex];    
}

【讨论】：