Question

我希望使用javascript随机化任何<div>，<ul>的子元素。我正在寻找最佳方法。有人可以帮忙吗？

假设我有一个<ul>，其中包含5个<li>元素。在加载时，我希望<li>元素以随机顺序出现。

Answer 1

快速离开我的脑袋：

使用detach

<ul>

将它们存储在一个数组中。
Shuffle that array
再次在<ul>中插入元素。

另请看一下这个问题：randomize div elements

Answer 2

我是这样做的（这里的JSFiddle示例：http://jsfiddle.net/LNvqr/2/）

如果您使用jQuery并且HTML与此类似：

<div>
    <ul id="rndList">
        <li id="itemOne">one</li>
        <li id="itemTwo">two</li>
        <li id="itemThree">three</li>
        <li id="itemFour">four</li>
        <li id="itemFive">five</li>
    </ul>    
</div>

然后您只需使用.detach删除并存储<li>元素的数组接下来，使用数组的副本，使用Math.random()生成一个0到1之间的（伪）随机整数，该整数小于数组的大小。将此作为随机索引从原始（有序）列表复制到新（随机排序）列表中在每次迭代中从原始数组中删除随机选择的元素，并选择一个新的随机元素，直到重新插入所有元素：

function shuffleList() {   
    var origList = $("#rndList li").detach();
    var newList = origList.clone();

    for (var i = 0; i < newList.length; i++) {
        //select a random index; the number range will decrease by 1 on each iteration
        var randomIndex = randomInt(newList.length - i);

        //place the randomly-chosen element into our copy and remove from the original:
        newList[i] = origList.splice(randomIndex, 1);

        //place the element back into into the HTML
        $("#rndList").append(newList[i]);
    }
}

function randomInt(maxNum) { //returns a random integer from 0 to maxNum-1
    return Math.floor(Math.random() * maxNum);
}

Answer 3

您可以使用以下代码实现此目的：

$(function () {
    var parent = $("#parent-container");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});

在加载时随机化子元素

3 个答案: