jQuery，随机div顺序

Question

我有这个jQuery和HTML代码：http://jsfiddle.net/UgX3u/30/

    <div class="container">
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="pink"></div>
    <div class="orange"></div>
    <div class="black"></div>
    <div class="white"></div>
    </div>​
$("div.container div").each(function(){
    var color = $(this).attr("class");
    $(this).css({backgroundColor: color});
});

我想要随机调整 div.container div 的顺序，使其出现在任意位置，而不是初始位置，同时这些 div 必须仍然在 div.container 中。

我尝试过http://jsfiddle.net/UgX3u/32/、http://jsfiddle.net/UgX3u/20/以及其他一些我在网上找到的函数，但都没有起作用。

请问如何让这些 div 按随机顺序显示？

- Yusaf Khaliq

---

一旦修正了打字错误（你写成了.addCass而不是.addClass），它似乎可以正常工作：更新的JS Fiddle。 - David Thomas

+1 对不起，我是个nonce :(。 - Yusaf Khaliq

当然可以！因为我从来没有做过那样的事情！真的从来没有...跑起来 =) - David Thomas

Answer 1

尝试这个： http://jsfiddle.net/UgX3u/33/

$("div.container div").sort(function(){
    return Math.random()*10 > 5 ? 1 : -1;
}).each(function(){
    var $t = $(this),
        color = $t.attr("class");
    $t.css({backgroundColor: color}).appendTo( $t.parent() );
});

在jQuery中，可以这样使用.sort：

$.fn.sort = [].sort

由于它的表现不像其他jQuery方法，因此没有文档记录。这意味着它可能会发生变化，但我怀疑它永远不会改变。为了避免使用未记录的方法，你可以像这样操作：

http://jsfiddle.net/UgX3u/37/

var collection = $("div.container div").get();
collection.sort(function() {
    return Math.random()*10 > 5 ? 1 : -1;
});
$.each(collection,function(i,el) {
    var color = this.className,
        $el = $(el);
    $el.css({backgroundColor: color}).appendTo( $el.parent() );
});

- Kevin B

---

截至今天（2013年9月），这个不再起作用了。我没有收到jQuery错误，它只是不起作用 :-( 我已经仔细检查了代码。我在www.stupidwebtools.com上尝试过了。另一方面，函数`shuffle(o)`运行得很好。 - Fabrizio

好的，即使我选择了最新的jQuery版本，在fiddle中它仍然可以工作。大部分工作都是由本地JavaScript方法完成的，因此没有任何理由停止工作。 - Kevin B

你好，如果我想在一个包含多个div的容器中随机选择几个class为"random"的div，该怎么办？因为我的div容器里还有其他的div，但我只想在容器内随机选择几个div。请帮忙。 - nodeffect

Answer 2

var $container = $("div.container");
$container.html(shuffle($container.children().get()));

function shuffle(o){
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

在这里找到了洗牌函数：链接

更新： jsFiddle

- Paul

Answer 3

这个例子假设你需要处理已经有类分配的页面元素：

var classes = [];

// Populate classes array
// e.g., ["yellow", "red", "green", "blue", "pink", "orange", "black", "white"]
$('div.container').children().each(function (i, v) {
    classes.push(v.className);
});

// Assign random color to each div
$('div.container').children().each(function (i, v) {
    var color = Math.floor(Math.random()*classes.length)
    $(v).css({backgroundColor: classes.splice(color,1)});
});

http://jsfiddle.net/UgX3u/40/

- Kai