我需要做的是: 原始状态:
<div class="shuffledv">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
<div class="shuffledv">
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
</div>
Shuffle之后:
<div class="shuffledv">
<div id="2"></div>
<div id="3"></div>
<div id="1"></div>
</div>
<div class="shuffledv">
<div id="5"></div>
<div id="4"></div>
<div id="6"></div>
</div>
第一个div中的Divs停留在那里但是被洗牌,同样的等级的第二个div也是如此。 为了在特定div中对div进行洗牌,我使用这样的东西:
function shuffle(e) { // pass divs inside #parent to the function
var replace = $('<div>');
var size = e.size();
while (size >= 1) {
var rand = Math.floor(Math.random() * size);
var temp = e.get(rand); // grab a random div from #parent
replace.append(temp); // add the selected div to new container
e = e.not(temp); // remove our selected div from #parent
size--;
}
$('#parent').html(replace.html()); // add shuffled divs to #parent
}
被称为谎言:shuffle('#parent .divclass')
所有班级divclass
的Div都位于#parent
内
我认为它应该开始像
function shuffle() {
$(".shuffledv").each(function() {
然后做一些形式的原始功能,但我刚刚完全迷失了。我不知道如何从这里前进。如果您需要更多信息,请告诉我。
答案 0 :(得分:12)
看看this jsfiddle。基本上我们所做的是为每个容器shuffledv
div找到所有子div并将它们存储在一个列表中,然后我们将它们从DOM中删除,例如:
$(".shuffledv").each(function(){
var divs = $(this).find('div');
for(var i = 0; i < divs.length; i++) $(divs[i]).remove();
然后我从here抓取了Fisher-Yates洗牌算法来随机化我们的div列表,最后我们将它们追加到父容器中,如下所示:
for(var i = 0; i < divs.length; i++) $(divs[i]).appendTo(this);
希望这有帮助!
答案 1 :(得分:3)
首先通过:
(function () {
"use strict";
// Cycle over each .shuffledv HTMLElement
$(".shuffledv").each(function () {
// Remove all divs within, store in $d
var $d = $(this).find("div").remove();
// Sort $d randomnly
$d.sort(function () { return Math.floor(Math.random() * $d.length); });
// Append divs within $d to .shuffledv again
$d.appendTo(this);
});
}());