jquery将元素移动到随机顺序
Posted
技术标签:
【中文标题】jquery将元素移动到随机顺序【英文标题】：jquery move elements into a random order 【发布时间】：2011-07-16 19:08:53 【问题描述】：我正在尝试以随机顺序显示一系列图像。但是，在显示所有项目之前，我不希望任何单个项目重复，因此我不想从数组中选择随机图像，而是要获取整个数组，将其随机化，然后从第一个到第一个依次选择最后一个元素。这是我的代码：
html：
<div id="tout4"
<img src="images/gallery01.jpg" class="img_lg"/>
<img src="images/gallery02.jpg" class="img_lg"/>
<img src="images/gallery03.jpg" class="img_lg"/>
</div>
以及当前按顺序选择和显示项目的javascript：
var galleryLength = $('#tout4 img.img_lg').length;
var currentGallery = 0;
setInterval(cycleGallery, 5000);
function cycleGallery()
$('#tout4 img.img_lg').eq(currentGallery).fadeOut(300);
if (currentGallery < (galleryLength-1))
currentGallery++;
else
currentGallery = 0;
$('#tout4 img.img_lg').eq(currentGallery).fadeIn(300);
那么我如何重新排列图像的实际顺序，而不仅仅是它们被选择的顺序？
【问题讨论】：
那么您的实际问题是什么？ 谷歌搜索 javascript shuffle 试试这篇文章中给出的函数：***.com/questions/962802/… 【参考方案1】：jQuery 的短版：
$('#tout4>').map(function(i,t)
var s=$(t).siblings();
s.eq(Math.round(s.length*Math.random())).after(t)
)
【讨论】：
【参考方案2】：Ended up using this（感谢布莱尔！）-
/**
* jQuery Shuffle (/web/20120307220753/http://mktgdept.com/jquery-shuffle)
* A jQuery plugin for shuffling a set of elements
*
* v0.0.1 - 13 November 2009
*
* Copyright (c) 2009 Chad Smith (/web/20120307220753/http://twitter.com/chadsmith)
* Dual licensed under the MIT and GPL licenses.
* /web/20120307220753/http://www.opensource.org/licenses/mit-license.php
* /web/20120307220753/http://www.opensource.org/licenses/gpl-license.php
*
* Shuffle elements using: $(selector).shuffle() or $.shuffle(selector)
*
**/
(function(d)d.fn.shuffle=function(c)c=[];return this.each(function()c.push(d(this).clone(true))).each(function(a,b)d(b).replaceWith(c[a=Math.floor(Math.random()*c.length)]);c.splice(a,1));d.shuffle=function(a)return d(a).shuffle())(jQuery);
那么在上面的代码中唯一需要添加的就是包含脚本，并调用shuffle函数：
<script type="text/javascript" src="js/jquery-shuffle.js"></script>
$('#tout4 img.img_lg').shuffle();
【讨论】：
【参考方案3】：<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to sort the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
var points = [40,100,1,5,25,10];
points.sort(function(a,b)return (Math.random()-0.5));
var x=document.getElementById("demo");
x.innerHTML=points;
</script>
</body>
</html>
解释：通常你有“return (a-b)”产生一个正数，用于升序排序；或者你有“return (b-a)”产生一个负数来进行降序排序。
这里我们使用 Math.random()-0.5，它在一半的情况下给出正数，在一半的情况下给出负数。因此，对的排序是升序或降序，产生数组元素的随机分布。
【讨论】：
【参考方案4】：经过多方探索，我决定采用fisher-yates算法并将其与jquery一起应用，无需克隆等。
$('#tout4 img.img_lg').shuffle();
/*
* Shuffle jQuery array of elements - see Fisher-Yates algorithm
*/
jQuery.fn.shuffle = function ()
var j;
for (var i = 0; i < this.length; i++)
j = Math.floor(Math.random() * this.length);
$(this[i]).before($(this[j]));
return this;
;
【讨论】：
谢谢你……太简单了。其他答案太复杂了。 所有“Math.random()-0.5”或“0.5-Math.random()”的答案都被证明是不正确的。它们不会产生随机结果。 （为什么：sort() 需要比较函数的一致性，而 random() 根据定义是随机的而不是一致的。） shuffle 函数似乎是正确的。 这个方法最好：简单、干净、实用，谢谢 Bricky，请考虑删除您的评论。这是误导。如果您不相信，请发布证明。 @MrPete，您能详细说明一致性问题吗？当然，对于非随机排序，如果重复比较给定的一对项目，则显然需要一致的结果；但是当期望的输出是随机顺序时，对我来说，从比较函数中获得随机结果会使最终结果不那么随机，这对我来说并不明显。【参考方案5】：你也可以使用常见的JavaScript Array randomize sorter，也可以评论here和here：
$('<my selector>').sort( function() return ( Math.round( Math.random() ) - 0.5 ) );
【讨论】：
以上是关于jquery将元素移动到随机顺序的主要内容，如果未能解决你的问题，请参考以下文章
为啥通过jQuery中的for循环后数组顺序是随机的？ [复制]