javascript - ngẫu nhiên danh sách HTML yếu tố để

Question

Tôi có một danh sách:

<ul> 
    <li>milk</li> 
    <li>butter</li> 
    <li>eggs</li> 
    <li>orange juice</li> 
    <li>bananas</li> 
</ul> 

Sử dụng javascript làm thế nào tôi có thể sắp xếp lại danh sách các mục ngẫu nhiên?

Answer 1

var ul = document.querySelector('ul'); 
for (var i = ul.children.length; i >= 0; i--) { 
    ul.appendChild(ul.children[Math.random() * i | 0]); 
} 

này được dựa trên Fisher–Yates shuffle, một nd khai thác thực tế là khi bạn nối thêm một nút, nó sẽ di chuyển từ vị trí cũ của nó.

Hiệu suất trong vòng 10% xáo trộn một bản sao tách rời ngay cả trên danh sách lớn (100 000 phần tử).

http://jsfiddle.net/qEM8B/

Answer 2

một cách đơn giản, như thế này:

JS:

var list = document.getElementById("something"), 
button = document.getElementById("shuffle"); 
function shuffle(items) 
{ 
    var cached = items.slice(0), temp, i = cached.length, rand; 
    while(--i) 
    { 
     rand = Math.floor(i * Math.random()); 
     temp = cached[rand]; 
     cached[rand] = cached[i]; 
     cached[i] = temp; 
    } 
    return cached; 
} 
function shuffleNodes() 
{ 
    var nodes = list.children, i = 0; 
    nodes = Array.prototype.slice.call(nodes); 
    nodes = shuffle(nodes); 
    while(i < nodes.length) 
    { 
     list.appendChild(nodes[i]); 
     ++i; 
    } 
} 
button.onclick = shuffleNodes; 

HTML:

<ul id="something"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 
<button id="shuffle" type="button">Shuffle List Items</button> 

Demo: http://jsbin.com/itesir/edit#preview

Answer 3

var list = document.getElementById("something"); 
    function shuffleNodes() { 
     var nodes = list.children, i = 0; 
     nodes = Array.prototype.sort.call(nodes); 
     while(i < nodes.length) { 
      list.appendChild(nodes[i]); 
      ++i; 
     } 
    } 
    shuffleNodes(); 

Answer 4

Dựa không @Alexey Lebedev của câu trả lời, nếu bạn thích một hàm jQuery mà shuffles yếu tố, bạn có thể sử dụng một:

$.fn.randomize = function(selector){ 
    var $elems = selector ? $(this).find(selector) : $(this).children(); 
    for (var i = $elems.length; i >= 0; i--) { 
    $(this).append($elems[Math.random() * i | 0]); 
    } 

    return this; 
} 

Và sau đó gọi nó như thế này:

$("ul").randomize();  //shuffle all the ul children 
$("ul").randomize(".item"); //shuffle all the .item elements inside the ul 
$(".my-list").randomize(".my-element"); //shuffle all the .my-element elements inside the .my-list element. 

Answer 5

Đây là cách rất đơn giản để trộn lẫn với JS:

var points = [40, 100, 1, 5, 25, 10]; 
points.sort(function(a, b){return 0.5 - Math.random()}); 

http://www.w3schools.com/js/js_array_sort.asp