将所有具有相同类的DIV随机排列

Question

What I need done is: Original State:

<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') 所有带有类名为divclass的Div都在#parent内部。 我认为它应该像这样开始：

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

然后执行某种原始功能，但在这一点上我已经完全迷失了。我不知道如何从这里继续。如果需要更多信息，请告诉我。

- Atom Vayalinkal

Answer 1

看一下这个 jsfiddle。本质上我们所做的是对于每个容器shuffledv，我们找到所有子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);

希望这能有所帮助！

- kieran

---

这不是最有效的解决方案。例如，如果您的div包含许多iframes，则会使浏览器重新加载所有iframes，应该找到一种在不删除/附加的情况下对它们进行洗牌的方法。 - Luvias

我的IDE在抱怨$未定义。我尝试在JavaScript中添加jQuery。我正在使用Replit。请给予任何建议吗？ - undefined

Answer 2

给这个做了一个初步的运行：

(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);
    });
}());

Demo: http://jsfiddle.net/uYyAH/2/

- Sampson

---

尝试了这个，但是 $d.sort 这一行没有任何作用。 - Asta86