2

私は3列のレイアウトを持っており、各列には同様のコンテンツのブロックを保持する複数のdivがあります。

<section class="info-blocks-container clearfix">
<div id="col1">
    <div class="info-block">...</div>
    <div class="info-block">...</div>
    <div class="info-block">...</div>
</div>
<div id="col2">
    <div class="info-block">...</div>
    <div class="info-block">...</div>
</div>
<div id="col3">
    <div class="info-block">...</div>
    <div class="info-block">...</div>
    <div class="info-block">...</div>
</div>
</section>

div#col1、、div#col2およびdiv#col3列内の子divをランダムにシャッフルしたいので、#col1の子divの一部は、#col2および/または#col3、またはその逆になります。ここにあるcodeparadoxを使用していて（「undo」関数を削除しました）、シャッフルは機能していfunction reorder()ますが、1。3つの 別々の重複関数がある方法は非常に汚れており、 2。各列内のdivを並べ替えているだけです（ 3つの列の間で子divを共有しない）：

<script type="text/javascript">
$(function(){
    reorder();
    reorder2();
    reorder3();

    function reorder() {
        var grp = $(".info-blocks-container > div:nth-child(1)").children();
        var cnt = grp.length;

        var temp, x;
        for (var i = 0; i < cnt; i++) {
            temp = grp[i];
            x = Math.floor(Math.random() * cnt);
            grp[i] = grp[x];
            grp[x] = temp;
        }
        $(grp).remove();
        $(".info-blocks-container > div:nth-child(1)").append($(grp));
    }
    function reorder2() {
        var grp = $(".info-blocks-container > div:nth-child(2)").children();
        var cnt = grp.length;

        var temp, x;
        for (var i = 0; i < cnt; i++) {
            temp = grp[i];
            x = Math.floor(Math.random() * cnt);
            grp[i] = grp[x];
            grp[x] = temp;
        }
        $(grp).remove();
        $(".info-blocks-container > div:nth-child(2)").append($(grp));
    }
    function reorder3() {
        var grp = $(".info-blocks-container > div:nth-child(3)").children();
        var cnt = grp.length;

        var temp, x;
        for (var i = 0; i < cnt; i++) {
            temp = grp[i];
            x = Math.floor(Math.random() * cnt);
            grp[i] = grp[x];
            grp[x] = temp;
        }
        $(grp).remove();
        $(".info-blocks-container > div:nth-child(3)").append($(grp));
    }
});
</script>

助言がありますか？

4

2 に答える 2

1

第二に、あなたの問題は私にとって本当に挑戦でした。しかし、私は解決策を見つけたと思います：

var columnsCollection = new Array();
var columnsObjectsNumber = new Array();

reorder();
function reorder() {
    $(".info-blocks-container").find("DIV[id^='col']").each(function()
    {           
        var tmp = $(this).children();
        //Store the numbers of contained children
        columnsObjectsNumber.push($(tmp).size());
        $(tmp).each(function()
        {
            //transfers current child object to our global store place
            columnsCollection.push($(this));
            //and removed it
            $(this).remove();
        });
    });

    var restartIndex = 0;
    $(".info-blocks-container").find("DIV[id^='col']").each(function()
    {
        //Contains the random generated number
        var x;
        //Contains the current object with Id 'col..'
        var temp = $(this);
        for (var i = 0; i < columnsObjectsNumber[restartIndex]; i++)
        {
            /*
              Generates a random number.
             The maximum limit is the current length from our global store place
            */
            x = Math.floor(Math.random() * columnsCollection.length);
            //Appends the object to the current object with Id 'col..'
            $(temp).append(columnsCollection[x]);
            //Removes the appended element from global store place
            columnsCollection.splice(x,1);
         }
        restartIndex++;
    });   
}

プロフェッショナルには見えませんが、機能します。うまくいけば、それはあなたが要求したものです...

于 2012-09-11T15:12:07.297 に答える
1

最初は、似たような3つの関数は必要ありません。1つの方法でキャストできます。

reorder();
function reorder(columnObject) {
    $(".info-blocks-container").find("DIV[id^='col']").each(function()
    {
        var grp = $(this).children();
        var cnt = grp.length;
        var temp, x;
        for (var i = 0; i < cnt; i++)
        {
            temp = grp[i];
            x = Math.floor(Math.random() * cnt);
            grp[i] = grp[x];
            grp[x] = temp;
         }
         $(grp).remove();
         $(this).append($(grp));  
    });
}
于 2012-09-11T14:58:02.240 に答える