Adición de clase aleatoriamente elegido etiqueta HTML con jQuery

Question

amolar el que hay que hacer es en mi menú me gustaría añadir una de las clases (enumerados a continuación) con el fin completamente al azar cada vez que se inicia la función (carga de la página)

ésta es mi HTML

<div id="menu"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Why Us</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
</div> 

Y esto es lo que me gustaría tener como resultado diferentes con cada orden temporal de clases añadidas

<div id="menu"> 
    <ul> 
     <li><a href="#" class="li-one" >Home</a></li> 
     <li><a href="#" class="li-five">About Us</a></li> 
     <li><a href="#" class="li-three">Portfolio</a></li> 
     <li><a href="#" class="li-two">Why Us</a></li> 
     <li><a href="#" class="li-four">Contact Us</a></li> 
    </ul> 
</div> 

a continuación he enumerado todas las clases.

.li-one .li-two .li-three .li-four .li-five 

He pasado horas perdido tratando de darse cuenta de eso, sin resultados

Muchas gracias por su ayuda de antemano

Answer 1

Algo similar a lo siguiente:

function randOrd() { 
    return (Math.round(Math.random())-0.5); 
} 

$(document).ready(function() { 
    var klasses = [ 'li-one', 'li-two', 'li-three', 'li-four', 'li-five' ]; 
    klasses.sort(randOrd); 
    $('#menu ul li a').each(function(i, val) { 
     $(this).addClass(klasses[i]); 
    }); 
}); 

Answer 2

Me gustaría echar un vistazo a http://blog.mastykarz.nl/jquery-random-filter/

for (c in ['li-one', 'li-two', 'li-three', 'li-four', 'li-five']) 
     // select the next link w/o a class starting with "li" 
     $("a:not(class^=li):random").addClass(c); 

Answer 3

Usando jQuery que podría hacer algo como

var classes = ['li-one', 'li-two', 'li-three', 'li-four', 'li-five']; 

function randomizeList(listObj) { 
    $(listObj).each(function() { 
     $(this).addClass(classes[Math.Random()*classes.size]); 
    }); 
} 

Answer 4

Esto dará lugar a una mejor redistribución de los nombres de las clases de la función aleatoria ordinaria:

Array.prototype.shuffle = function(){ 
    var i = this.length, j, temp; 
    if (i == 0) return; 
    while (--i) { 
     j = Math.floor(Math.random() * (i + 1)); 
     temp = this[i]; 
     this[i] = this[j]; 
     this[j] = temp; 
    } 
}; 
var classes = new Array('one', 'two', 'three', 'four', 'five'); 
classes.shuffle(); 

var menu = $('#menu ul li'); 
for (var i = 0; i < menu.length; i++) 
{ 
    menu.eq(i).children('a').addClass('li-'+classes[i]); 
} 

Answer 5

<script type="text/javascript"> 
var style=new Array('li-one','li-two','li-three','li-four','li-five'); 
var l=style.length; 
$(document).ready(function(){ 
    var t=(new Date()).getSeconds()%l; 

    if(t>l){ while(t>l) t=(new Date()).getSeconds()%l; } 

    var i=t; 

    $("div#menu ul li a").each(function(a,b){ 
    if(i<l){ 
    $(b).addClass(style[i++]); 
    }else{ 
    if(t>=0){ 
    $(b).addClass(style[--t]); 
    } 
    } 
    }); 
}); 
</script>