php - 使用 jQuery 随机化页面上 <a> 链接的顺序

Question

我现在有一个标签内的链接列表。我希望页面在页面重新加载(页面 View )时“重新组织”每个链接的顺序并显示结果。

例如:

<div id="testgroup">
     <a href="1.html" id="1">1</a>
     <a href="2.html" id="2">2</a>
     <a href="3.html" id="3">3</a>
     <a href="4.html" id="4">4</a>
     <a href="5.html" id="5">5</a>
</div>

在页面重新加载时，源代码如下所示:

<div id="testgroup">
     <a href="5.html" id="5">5</a>
     <a href="1.html" id="1">1</a>
     <a href="3.html" id="3">3</a>
     <a href="4.html" id="4">4</a>
     <a href="2.html" id="2">2</a>
</div>

或其他一些随机顺序

是否有非常基本的 jQuery DOM 操作脚本来完成此操作？如果有帮助，该页面也是基于 PHP 构建的。

Answer 1

如果简单性比随机性更重要:

您可以使用 get 将 jQuery 对象转换为数组，然后使用 native sort 和旨在随机化它的函数。然后将随机排列的数组放回DOM。

var array = $("#testgroup").children().get().sort( function() {
    return 0.5 - Math.random();
});
$("#testgroup").append(array);

演示:http://jsfiddle.net/4e7cs/

如果您正在寻找真正的洗牌:

您可以利用 Fisher-Yates shuffle :

var array = $("#testgroup").children().toArray();
var i = array.length,
    j, temp;
while (--i) {
    j = Math.floor(Math.random() * (i + 1));
    temp = array[i];
    array[i] = array[j];
    array[j] = temp;
}

$("#testgroup").append(array);

演示:http://jsfiddle.net/4e7cs/3/

这是一个writeup为什么第一个不好，但为了完整起见，我会把它留在这里。