7

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

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

洗牌后：

<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 中的 div 保留在那里但被洗牌，同样的情况发生在具有相同类的第二个 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') 所有有类的 Divdivclass都在里面，#parent 我认为它应该开始像

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

然后执行某种形式的原始功能，但此时我完全迷失了方向。我不知道如何从这里继续前进。如果您需要更多信息，请告诉我。

4

2 回答 2

12

看看这个 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);

希望这可以帮助！

于 2012-11-17T03:29:12.667 回答
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);
    });
}());

演示：http: //jsfiddle.net/uYyAH/2/

于 2012-11-17T03:42:44.560 回答