随机排列 DOM 元素 | CSS-Tricks

这来自 James Padolsey。查看他的文章以了解纯 JavaScript 技术。

插件

(function($){
 
    $.fn.shuffle = function() {
 
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
 
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
 
        return $(shuffled);
 
    };
 
})(jQuery);

使用

目标元素，调用 shuffle。

$('ul#list li').shuffle();

Vladimir Komarov

# 2010 年 1 月 7 日

感谢您发布这篇文章 - 它很有用。我将再次阅读有关 map、get 和 replaceWith 的 jQuery 文档，以及有关原生 js splice 的文档。

Alexandre Cárdenas

# 2011 年 12 月 22 日

您的网页设计太棒了。我爱它。恭喜！

Alex

Kiran

# 2012 年 7 月 26 日

很棒的文章。谢谢。

Nitin

# 2013 年 3 月 26 日

很棒的插件。非常感谢。

Trevor

# 2013 年 3 月 26 日

有人知道如何在同一页面上随机化两个不同的列表时使它起作用吗？是的，我可以为每个列表分配一个不同的 ID，然后像这样随机排列它们

$(‘ul#list1 li’).shuffle();
$(‘ul#list2 li’).shuffle();

但我想要做的是
$(‘ul.randlist li’).shuffle();

然后它将仅随机排列该 UL 中的列表项，即使我在页面上有多个列表。现在它的作用是随机排列所有具有该类的所有ul中的所有列表项。这不是我想要的，因为列表项需要与它们的父项保持一致。

Jesse

# 2013 年 5 月 16 日

Trevor，使用each()很简单

$('ul.randlist').each(function(){ $(this).find('li').shuffle() })

Jesse

# 2013 年 5 月 17 日

此外，我注意到这个插件会破坏对原始元素的引用（因为它实际上复制了它们）。我写了一个版本，它实际上会随机排列原始元素。

“`
(function($){

$.fn.shuffle = function() {

  var elements = this.get()
  var copy = [].concat(elements)
  var shuffled = []
  var placeholders = []

  // Shuffle the element array
  while (copy.length) {
    var rand = Math.floor(Math.random() * copy.length)
    var element = copy.splice(rand,1)[0]
    shuffled.push(element)
  }

  // replace all elements with a plcaceholder
  for (var i = 0; i < elements.length; i++) {
    var placeholder = document.createTextNode('')
    findAndReplace(elements[i], placeholder)
    placeholders.push(placeholder)
  }

  // replace the placeholders with the shuffled elements
  for (var i = 0; i < elements.length; i++) {
    findAndReplace(placeholders[i], shuffled[i])
  }

  return $(shuffled)

}

function findAndReplace(find, replace) {
  find.parentNode.replaceChild(replace, find)
}

})(jQuery)
“`

Andrew Van Wart

# 2013 年 5 月 22 日

极好的提示！我只会补充一点，如果您在父 ul#list 中嵌套了列表项 (ul ul li)，为了只随机排列父列表项，请使用此代码进行初始化

$('ul#list > li').shuffle();

Trevor

# 2013 年 5 月 25 日

感谢 Jesse！哇，这是一个简单的修复，我显然需要更好地学习 jQuery。您的更新的 shuffle 函数很棒！

我只是想知道您对函数“将破坏对原始元素的引用”的具体含义？

Markus

# 2013 年 8 月 8 日

许可证？

Markus

评论的永久链接# 2013 年 8 月 9 日

所以也许这个适用 https://css-tricks.cn/license/ … 我现在要被提拔了：D

Rahul

# 2013 年 12 月 31 日

所需的最小项目数是多少？

Shahab

# 2014 年 5 月 12 日

不错的解决方案：)
我做了一些小的改动，做了一个插件来随机删除一些项目
(function($) {
$.fn.randomRemove = function(n) {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
};
if (allElems.length > n) {
while (n > 0) {
var random = getRandom(allElems.length);
$(allElems[random]).remove();
allElems.splice(random, 1);
n–;
}
}
return $(allElems);
};
})(jQuery);

Aamir Afridi

# 2014 年 9 月 1 日

或者试试这个

var parent = $("#shuffle");
var divs = parent.children();
while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}

Asher

评论的永久链接# 2015 年 2 月 20 日

不错 ^

binaryum

# 2015 年 6 月 29 日

@jess 的不错。真的很有效，其他选项破坏了引用，从而破坏了我的应用程序！
再次感谢！

Donnie Kerr

# 2015 年 10 月 8 日

谢谢！帮了我大忙！

rogez

# 2016 年 8 月 22 日

效果像宝石一样。谢谢！

Giovanni

# 2017 年 5 月 25 日

哇，这真是一个很棒的脚本，感谢分享！

有没有办法只在 n 个帖子之后应用随机排列？

再次感谢

filmtablette

评论的永久链接# 2017 年 6 月 23 日

@Giovanni：我认为

if (posts > n) {
$(‘#elements’).shuffle();
}

filmtablette

# 2017 年 6 月 23 日

是否可以将它们全部动画化？

smlombardi

# 2018 年 8 月 20 日

有人知道这个的 ES6/Typescript 非 jQuery 版本吗？当我尝试将“原生 js”版本插入我的 Angular 应用程序时，它会抛出错误，语法完全错误。

ayman bouybri

# 2021 年 5 月 25 日

您好，我想问一下，如果我们想在这个函数中添加一些 setInterval，如何才能每次循环它，谢谢

Marco

# 2024 年 6 月 14 日

有纯 JavaScript 版本吗？

Marco Marquez

评论的永久链接# 2024 年 6 月 17 日

没关系，我已经做了这个，希望它能帮助您

https://gist.github.com/marcomarkkez/53331159aab7521e66df3f5efbae3208

插件

使用

评论

发表评论 取消回复

发表评论取消回复