Adding Randomly chosen class to HTML tag using jQuery
Whet I need to do is in my menu I would like to add one of the classes (listed below) with开发者_如何学JAVA completely random order every time when function starts (page load)
This is my 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>
And this is what I would like to have as the result with every time different order of added classes
<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>
Below I have listed all the classes.
.li-one .li-two .li-three .li-four .li-five
I have spent lost hour trying to figure that out with no results
Thank you very much for your help in advance
Something like the following:
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]);
});
});
Using jQuery you could do something like
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]);
});
}
I would take a look at 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);
This will result in a much better shuffling of the class names than the ordinary random function:
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]);
}
<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>
精彩评论