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 はそこにとどまりますが、シャッフルされます。同じクラスの 2 番目の 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を見てください。基本的に、コンテナ div ごとに、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);

お役に立てれば！

于 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 に答える