2011-11-22 290 views
1

可能重複:
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> 
+0

如果你想使用插件,這可能回答你的問題http://stackoverflow.com/questions/7070054/javascript-shuffle-html-list-element-order –

+0

,你可以看看最後的答案在這裏:http://stackoverflow.com/questions/5329201/jquery-move-elements-into-a-random-order – Sgoettschkes

+0

謝謝Prashant。看起來只是工作。 –

回答

6

正是你想要的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