Question

我有一个目前调整大小的div数组（根据div中的文本），然后在按钮单击事件上附加到容器。我正在使用算法对数组进行随机排序，我想按顺序将其放在包含div中。

JS

  $(document).ready(function ()
        {
            $('.box').draggable();
            var boxArray = $('.box');
            $('#btnSubmit').click(function ()
            {
                randomizeArray(boxArray);
                $('.box').each(function ()
                {
                    $(this).appendTo('#itemContainer');

                });
            });

            //shuffle the array randomly
            function randomizeArray(array)
            {
                var currentIndex = array.length, temporaryValue, randomIndex;

                // While there remain elements to shuffle...
                while (0 !== currentIndex)
                {

                    // Pick a remaining element...
                    randomIndex = Math.floor(Math.random() * currentIndex);
                    currentIndex -= 1;

                    // And swap it with the current element.
                    temporaryValue = array[currentIndex];
                    array[currentIndex] = array[randomIndex];
                    array[randomIndex] = temporaryValue;
                }

                return array;
            }

HTML

 <div id="boxContainer">
    <div class="box">
        <div>Item1 - 40</div>
    </div>
    <div class="box">
        <div>
            Item2 - 20</div>
    </div>
    <div class="box">
        <div>
            Item3 - 90</div>
    </div>
    <div class="box">
        <div>
            Item4 - 60</div>
    </div>
    <div class="box">
        <div>
            Item5 - 70</div>
    </div>
    </div>
    <div id="itemContainer">
    </div>

CSS

body {
}
.box
{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    min-width:40px;
    min-height:40px;
}
#itemContainer
{
    float:right;
    width:600px;
    height:800px;
    border: 1px solid black;
}
#boxContainer
{
    float:left;
}
#itemContainer div
{
    float:left;
}

是否有一种简单的方法可以解决这个问题？我想有尽可能多的隐藏div，因为数组保存在容器div中，并使用类似于数组索引的东西附加到隐藏div的ID。有没有比这更简单的方法来随机排序div数组呢？

将数组元素随机放在容器元素jQuery中

0 个答案: