随机化无序列表[重复]答案

【问题标题】：Randomize a unordered list [duplicate]随机化无序列表[重复]
【发布时间】：2012-01-03 18:21:16
【问题描述】：

可能重复：
javascript - shuffle HTML list element order

经过一点帮助。经过一些非常简单的事情，但似乎无法找到自己的方法。

我从一些后端代码生成了一个动态无序列表（不在我的控制之下）。该列表可以是从 9 个标签到 100+ 的任何标签。它们按后端代码定义的顺序返回。使用 jQuery/javascript，我希望能够随机化 li 标签的顺序，而不会重复它们中的任何一个。

我的清单目前看起来像这样：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

【问题讨论】：

这可能会回答您的问题stackoverflow.com/questions/7070054/…
如果你想使用插件，可以在这里查看最后一个答案：stackoverflow.com/questions/5329201/…
谢谢普拉尚特。看起来只是这份工作。

标签： javascript jquery html-lists

【解决方案1】：

jQuery Forums 中描述了您想要做什么。

$(document).ready(function(){
      $('ul').each(function(){
            // get current ul
            var $ul = $(this);
            // get array of list items in current ul
            var $liArr = $ul.children('li');
            // sort array of list items in current ul randomly
            $liArr.sort(function(a,b){
                  // Get a random number between 0 and 10
                  var temp = parseInt( Math.random()*10 );
                  // Get 1 or 0, whether temp is odd or even
                  var isOddOrEven = temp%2;
                  // Get +1 or -1, whether temp greater or smaller than 5
                  var isPosOrNeg = temp>5 ? 1 : -1;
                  // Return -1, 0, or +1
                  return( isOddOrEven*isPosOrNeg );
            })
            // append list items to ul
            .appendTo($ul);            
      });
});

示例：http://jsbin.com/upuju3/2

【讨论】：