用相同的级别对所有DIVS进行随机播放

Question

我需要做的是:原始状态:

<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') 所有有班级的Div divclass都在里面,#parent 我认为应该从这里开始

function shuffle() {        
            $(".shuffledv").each(function() {

然后做一些形式的原始功能,但我刚刚完全迷失了.我不知道如何从这里前进.如果您需要更多信息,请告诉我.

Answer 1

看看这个jsfiddle.基本上我们所做的是为每个容器shuffledvdiv找到所有子div并将它们存储在一个列表中,然后我们将它们从DOM中删除,例如:

$(".shuffledv").each(function(){
        var divs = $(this).find('div');
        for(var i = 0; i < divs.length; i++) $(divs[i]).remove();     

然后我从这里抓住了Fisher-Yates洗牌算法来随机化我们的div列表,最后我们将它们追加到父容器中,如下所示:

for(var i = 0; i < divs.length; i++) $(divs[i]).appendTo(this);

希望这可以帮助!