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

Question

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

例如：

<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 对象转换为数组，然后使用原生的 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 说明为什么第一个不好，但为了完整起见，我会把它留在这里。

Answer 2

PHP 有一个shuffle() 函数来随机化数组。您可以在服务器端进行随机化。

<?php
$links = array(
    1 => '1.html',
    2 => '2.html',
    3 => '3.html',
    4 => '4.html',
    5 => '5.html'
);
$shuffledLinks = shuffle_assoc($links);

foreach ($shuffledLinks as $value=>$key) {
    echo '<a href="'.$key.'" id='.$value.'>'.$value.'</a><br/>';
}
function shuffle_assoc($list) {
    if (!is_array($list)) return $list;

    $keys = array_keys($list);
    shuffle($keys);
    $random = array();
    foreach ($keys as $key)
        $random[$key] = $list[$key];

    return $random;
} 
?>

好的...现在已修复并经过测试。实际上 shuffle() 不适用于关联数组，所以我借用了andjones at gmail dot com's shuffle_assoc() function for that。

我还混淆了我使用“+”而不是“。”的连接。 O.o 混合了我的 JavaScript 和 PHP 语法。对此我深表歉意。

艾伦

Answer 3

我正在使用一个实际上可以做到这一点的插件：http://james.padolsey.com/javascript/sorting-elements-with-jquery/

但是如果你使用的是PHP，你可以直接在服务器上排序吗？