如何随机排序列表项？答案

【问题标题】：How to randomly sort list items?如何随机排序列表项？
【发布时间】：2013-01-11 09:37:04
【问题描述】：

我目前有这个随机排序列表项的代码：

var $ul = $('#some-ul-id');
$('li', $ul).sort(function(){
   return ( Math.round( Math.random() ) - 0.5 )
}).appendTo($ul);

但是，有没有更好的解决方案？

【问题讨论】：

标签： javascript jquery sorting random html-lists

【解决方案1】：

看看this question and answer thread。我喜欢这个通过用户gruppler的解决方案：

$.fn.randomize = function(selector){
    var $elems = selector ? $(this).find(selector) : $(this).children(),
        $parents = $elems.parent();

    $parents.each(function(){
        $(this).children(selector).sort(function(){
            return Math.round(Math.random()) - 0.5;
        // }). remove().appendTo(this); // 2014-05-24: Removed `random` but leaving for reference. See notes under 'ANOTHER EDIT'
        }).detach().appendTo(this);
    });

    return this;
};

编辑：使用说明如下。

随机化每个'.member'<div>中的所有<li>元素：

$('.member').randomize('li');

随机化每个<ul> 的所有孩子：

$('ul').randomize();

另一个编辑： akalata 在 cmets 中告诉我，detach() 可以用来代替 remove()，主要好处是如果任何数据或附加的侦听器连接到元素并且它们是随机的，detach() 将它们保持在原位。 remove() 只会把听众扔出去。

【讨论】：

您引用的问题已更新为使用 detach() 而不是 remove() - 仅供参考，以防其他人想知道他们的其他附加行为去了哪里！
@akalata 感谢您的提示！使用detach() 更有意义，因为……您刚刚说过。
您永远不应该通过使用随机比较器对列表进行排序来打乱列表。请参阅bost.ocks.org/mike/shuffle/compare.html 以获得漂亮的视觉解释

【解决方案2】：

我也坚持在谷歌上搜索并遇到一个代码的此类问题。我修改此代码以供我使用。我还包括 15 秒后的随机播放列表。

<script>
 // This code helps to shuffle the li ...
(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);

       // I am displying the 6 elements currently rest elements are hide.

       function listsort(){
       jQuery('.listify_widget_recent_listings ul.job_listings').each(function(index){
         jQuery(this).find('li').shuffle();
         jQuery(this).find('li').each(function(index){
           jQuery(this).show();
           if(index>=6){
             jQuery(this).hide();
           }
         });
       });
       }
       // first time call to function ...
       listsort();
       // calling the function after the 15seconds.. 
       window.setInterval(function(){
         listsort();
         /// call your function here 5 seconds.
       }, 15000);                 
</script>

希望这个解决方案有所帮助....祝您工作愉快..

【讨论】：