up vote 1 down vote favorite

Well this was a simplest code competition at my work. I tried a couple things, they accepted but none of them is I wanted. Because both are always giving same result.

I tried to randomize like this

var list = $(".content li").sort(Math.round(Math.random())-0.5);

and this

var list = $(".content li").get().sort(function(){ return Math.round(Math.random())-0.5 }).slice(0,$(".content li").length)

and this

$(".content li").each(function(i){
    $(this).sort(Math.round(Math.random())-0.5)
});

And the work is;

$(list).each(function(i){
    $(this).delay(i * 300).fadeIn(300);
});

So the aim is less line but clever way I think better. Any suggestion?

share|improve this question
@RoryMcCrossan is there any way to move or should i create a new question on Code Review? – siniradam May 21 '12 at 10:29
I don't think you can move it. It's probably best to delete this question and create a new one on code review – Rory McCrossan May 21 '12 at 10:44

migrated from stackoverflow.com May 21 '12 at 16:49

3 Answers

up vote 0 down vote accepted

Here is a version that is working, but I'm not sure if it is the best way to do it (this is not the best way, look below)

var $elements = $('.your-selector');

// print it once to see its content
console.log( $elements.get() );

// get all DOM elements in temporary array
var temp = $elements.get();

// randomize that array
temp = temp.sort(function() {
    return Math.round( Math.random() ) - 0.5;
});

// iterate the randomized array
// while "$elements" and "temp" have the same length
// each index of "$elements" will be overridden
temp.forEach(function( element, index ) {
    // and update the jQuery object
    $elements[ index ] = element;
});

// print it again to see the difference
// the order in the original element has been changed
console.log( $elements.get() );

Here is why your versions are not working

var list = $(".content li").sort(Math.round(Math.random())-0.5);
/*
$.fn.sort is not an actual function, or it is... This is not documented ??
Well I don't know what's going on here...
jQuery.fn.sort is not present in the documentation, this it is in the source code
so can we use it ?!
if we can... here is a working version
*/
// jQuery.fn.sort needs a function as parameter
$(".content li").sort(function() {
    // and this function needs to return a value
    return Math.round(Math.random())-0.5;
});
// THIS is a simplified working example :)



var list = $(".content li").get().sort(function(){
    return Math.round(Math.random())-0.5
}).slice(0,$(".content li").length);
/*
First, the slice part seems not useful since you're splicing from 0 to the array length
Then, you use the get method, which return a JavaScript array, and then the sort method
It means that, the result of "sort" will be the sorted array, and not a jQuery object
*/



$(".content li").each(function(i){
    $(this).sort(Math.round(Math.random())-0.5)
});
/*
Here, same comment as above: "sort" need a function (with a return value) as parameter
Then, you're using the sort method of a jQuery object containing only one element (this),
  so nothing can be sorted
Finally, each only iterate the collection and cannot modify elements order,
  or you could do it but it could be harmful
*/

Hope that'll help :)

share|improve this answer
i see, i was wrong because i tried to write randomize before creating a function. That is clarifies and sort is working on chrome but not working on firefox but that is not the case. Thank you. – siniradam May 22 '12 at 7:22
up vote 0 down vote

Not sure if this is what you mean, but here’s how to get a random element from a given jQuery collection:

var $elements = $('.content li'),
    length = $elements.length;
$elements.eq(Math.floor(Math.random() * length)); // random element from the set
share|improve this answer
Thank you but, i want to randomize whole list. Not just one item. i need to a randomized list. – siniradam May 21 '12 at 10:28
up vote 0 down vote

This is as concise as I can make it :

var $x = $(".content li");//create jQuery object
Array.prototype.sort.call($x, function(){ return Math.random() < 0.5; });//randomize the jQuery object
$x.each(function(i, li){ $(".content").append(li); });//put li's in the DOM in same order as the randomized jQuery object.

See working fiddle. Click "Run" to re-randomize.

NOTE: I'm not sure my randomization paradigm is a true randomizer. It randomly chooses to swap or not to swap adjacent members. With repeated runs, note how 1 tends to favour the top of the list and 5 tends to favour the bottom. This aspect could be improved.

EDIT: Here's a version with improved shuffle algorithm - wonderfully concise and horribly unreadable :

for (var $x=$(".content li"), i=$x.length-1, j, temp; i>=0; i--) { j=Math.floor(Math.random()*(i+1)), temp=$x[i], $x[i]=$x[j], $x[j]=temp; }
$x.each(function(i, li) { $(".content").append(li); });

See working fiddle

share|improve this answer

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.