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，你可以直接在服务器上对它进行排序吗？

随机化<a> links on page using jQuery</a>的顺序

3 个答案: