javascript jQuery，随机 div 顺序

jQuery, random div order

提问by Yusaf Khaliq

I have this jQuery and HTML http://jsfiddle.net/UgX3u/30/

我有这个 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});
});

I am trying to randomise the order, so the div.container divis in any random position, meaning not the same position it started. and the div must remain within the div.container

我试图随机化顺序，所以div.container div它处于任何随机位置，这意味着它开始的位置不同。并且 div 必须保持在div.container

I have tried http://jsfiddle.net/UgX3u/32/http://jsfiddle.net/UgX3u/20/and more functions I found on the net but non are working

我已经尝试过 http://jsfiddle.net/UgX3u/32/ http://jsfiddle.net/UgX3u/20/以及我在网上找到的更多功能但没有工作

?how can I get the div's to display in a random order

? 如何让 div 以随机顺序显示

采纳答案by Kevin B

Try this:

试试这个：

http://jsfiddle.net/UgX3u/33/

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() );
});

.sortis applied to jQuery like this:

.sort像这样应用于jQuery：

$.fn.sort = [].sort

Since it doesn't perform like other jQuery methods, it isn't documented. That does mean it is subject to change, however I doubt it will ever change. To avoid using the undocumented method, you could do it like this:

由于它不像其他 jQuery 方法那样执行，因此没有记录。这确实意味着它可能会发生变化，但我怀疑它永远不会改变。为避免使用未记录的方法，您可以这样做：

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

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() );
});

回答by Paul

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;
};

Shuffle function found here

随机播放功能在这里找到

Updated:jsFiddle

更新：jsFiddle

回答by Kai

This example assumes you have to work with elements already on a page with classes assigned to them:

此示例假设您必须使用页面上已分配有类的元素：

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/

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