我需要做的是:
原始状态:
原始状态:
<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() {
然后做一些形式的原始功能,但我刚刚完全迷失了.我不知道如何从这里前进.如果您需要更多信息,请告诉我.
解决方法
看一下
this jsfiddle.基本上我们所做的是为每个容器shuffledv divs找到所有子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);
希望这可以帮助!