jQuery，随机 div 顺序

Posted 2023-02-25

【中文标题】jQuery，随机 div 顺序

【英文标题】：jQuery, random div order

【发布时间】：2012-03-15 05:37:24

【问题描述】：

我有这个 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 以随机顺序显示

【问题讨论】：

它似乎工作正常，一旦错字被修正（你有.addCass而不是.addClass）：Updated JS Fiddle。

+1 抱歉我是个随机数 :(.

绝对！因为我从来没有这样做过！ ...从来没有... 运行 =)

【参考方案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() );
);

.sort 像这样应用于 jQuery：

$.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() );
);

【讨论】：

从今天（2013 年 9 月）开始，这不再有效。我没有收到 jQuery 错误，它根本不起作用 :-( dbl 检查了代码。我在这里尝试过 www.stupidwebtools.com 。另一方面，函数 shuffle(o) 效果很好。

好吧，即使我选择了最新的 jquery 版本，它仍然可以正常工作。大部分工作都是由原生 javascript 方法完成的，因此没有任何理由停止工作。

您好，如果我想在 div 容器中随机抽取几个类名为“random”的 div，该怎么办？由于在我的 div 容器内还有多个 div，但我只希望在容器内随机有几个 div。请帮忙。

【参考方案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;
;

找到随机播放功能here

更新： jsFiddle

【参考方案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/