Question

我正在创建我的第一个网站（个人用于我的投资组合）。我有内容在divs，但希望他们每次重新加载页面时随机重新排序。我试图搜索解决方案，发现了一些类似的问题，但没有得到任何工作（也许是因为我的内容有多个类？）。

我在body标签里面的是：

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

[...]等等。

感谢帮助！谢谢！

Answer 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]);
}
});

Answer 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(''));

你可以在https://stackoverflow.com/a/6274398/2604607

找到shuffle（）函数

Answer 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];    
}

用jquery随机化页面加载时div的顺序？

3 个答案: