jQuery, यादृच्छिक div आदेश

Question

मैं इस jQuery और एचटीएमएल http://jsfiddle.net/UgX3u/30/

<div class="container"> 
    <div class="yellow"></div> 
    <div class="red"></div> 
    <div class="green"></div> 
    <div class="blue"></div> 
    <div class="pink"></div> 
    <div class="orange"></div> 
    <div class="black"></div> 
    <div class="white"></div> 
    </div>​ 
$("div.container div").each(function(){ 
    var color = $(this).attr("class"); 
    $(this).css({backgroundColor: color}); 
}); 

मैं आदेश randomise कोशिश कर रहा हूँ, इसलिए div.container div किसी भी यादृच्छिक स्थिति में है, नहीं एक ही स्थिति यह शुरू कर दिया है, जिसका अर्थ है। और div div.container

भीतर ही रहना चाहिए मैं http://jsfiddle.net/UgX3u/32/ http://jsfiddle.net/UgX3u/20/ और अधिक कार्यों मैं नेट पर पाया की कोशिश की है, लेकिन गैर

काम कर रहे हैं मैं कैसे प्राप्त कर सकते हैं div एक यादृच्छिक क्रम में प्रदर्शित करने के लिए की

Answer 1

इस प्रयास करें:

http://jsfiddle.net/UgX3u/33/

$("div.container div").sort(function(){ 
    return Math.random()*10 > 5 ? 1 : -1; 
}).each(function(){ 
    var $t = $(this), 
     color = $t.attr("class"); 
    $t.css({backgroundColor: color}).appendTo($t.parent()); 
}); 

.sort इस तरह jQuery के लिए लागू किया जाता है:

$.fn.sort = [].sort 

चूंकि यह अन्य jQuery के तरीकों की तरह प्रदर्शन नहीं करता है, यह दर्ज नहीं किया गया है। इसका मतलब यह है कि यह परिवर्तन के अधीन है, हालांकि मुझे संदेह है कि यह कभी भी बदल जाएगा। गैर-दस्तावेजी विधि का उपयोग कर से बचने के लिए, आप इसे इस तरह से कर सकता है:

http://jsfiddle.net/UgX3u/37/

var collection = $("div.container div").get(); 
collection.sort(function() { 
    return Math.random()*10 > 5 ? 1 : -1; 
}); 
$.each(collection,function(i,el) { 
    var color = this.className, 
     $el = $(el); 
    $el.css({backgroundColor: color}).appendTo($el.parent()); 
}); 

Answer 2

var $container = $("div.container"); 
$container.html(shuffle($container.children().get())); 

function shuffle(o){ 
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
    return o; 
}; 

घसीटना समारोह पाया here

अपडेट किया गया: jsFiddle

Answer 3

इस उदाहरण में कल्पना आपको पहले से ही पीए पर तत्वों के साथ काम करना है उन्हें सौंपे गए वर्गों के साथ जीई:

var classes = []; 

// Populate classes array 
// e.g., ["yellow", "red", "green", "blue", "pink", "orange", "black", "white"] 
$('div.container').children().each(function (i, v) { 
    classes.push(v.className); 
}); 

// Assign random color to each div 
$('div.container').children().each(function (i, v) { 
    var color = Math.floor(Math.random()*classes.length) 
    $(v).css({backgroundColor: classes.splice(color,1)}); 
}); 

http://jsfiddle.net/UgX3u/40/