How can I randomize the value of CSS attributes using jquery?
Question
I'm trying to use jquery to make a css selector randomize one of its values on an html element. I've gotten as far as randomizing the selector for all of the elements (cycling through colors on a list border-left), however I want to randomize each individual list element at the same time.
Apologies if that's confusing (I'm confused by it myself), but you'll understand if you run the below code a few times and watch the border color change. Ideally, those border colors would all be different.
Thanks very much for any help.
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<style>
.bars{
border-left-style: solid;
border-left-width: 4px;
padding-left: 10px;
}
ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li class="bars">
<a>Marathon Men and Women</a>
</li>
<li class="bars">
<a>Marathon Men and Women</a>
</li>
<li class="bars">
<a>Marathon Men and Women</a>
</li>
<li class="bars">
<a>Marathon Men and Women</a>
</li>
<li class="bars">
<a>Marathon Men and Women</a>
</li>
</ul>
</body>
<script>
$(document).ready(function(){
var colors = ["#CCCCCC","#333333","#990099"];
var rand = Math.floor(Math.random()*colors.length);
$('.bars').css("border-left-color", colors[rand]);
});
</script>
4 answers
solution1
4 ACCPTED 2014-04-12 02:56:38
You can use jQuery.each() function to specify individual colors: http://jsfiddle.net/qaF24/
$(document).ready(function(){
var colors = ["#CCCCCC","#333333","#990099"];
$('.bars').each(function() {
var rand = Math.floor(Math.random()*colors.length);
$(this).css("border-left-color", colors[rand]);
});
});
solution2
1 2014-04-12 02:58:16
var colors = ["#CCCCCC", "#333333", "#990099"];
var bars = document.getElementsByClassName('bars');
for (var i = 0; i < bars.length; i++) {
bars[i].style.borderLeftColor = colors[Math.floor(Math.random() * colors.length)];
}
Maybe a vanilla solution will help somebody. Faster, without more code.
solution3
0 2014-04-12 02:58:00
The jQuery selector ('.bars') is selecting all elements of the class 'bar'. Of course it's going to set them all the same.
I would recommend instead assign an id to the parent element and then use the .children() selector to iterate through each <li> and assign a color.
something like
<ul id="bars">
<li>
<a>Marathon Men and Women</a>
</li>
<li>
<a>Marathon Men and Women</a>
</li>
<li>
<a>Marathon Men and Women</a>
</li>
<li>
<a>Marathon Men and Women</a>
</li>
<li>
<a>Marathon Men and Women</a>
</li>
</ul>
<script>
$(document).ready(function(){
var colors = ["#CCCCCC","#333333","#990099"],rand;
var ligroup = $('#bars').children();
for (var i=0,len=ligroup.length;i<len;i++) {
rand = Math.floor(Math.random()*colors.length);
$(ligroup[i]).css("border-left-color", colors[rand]);
}
});
</script>
solution4
0 2014-04-12 03:46:02
$(document).ready(function () {
var bars = document.getElementsByClassName('bars');
for (var i = 0; i < bars.length; i++) {
bars[i].style.borderLeftColor ="#"+genColor();
}
});
Random color generator for each Li : http://jsfiddle.net/RMR42/2/
you have to use some sort of looping through all the similar class elements if you want each individual to be different and random.
reference: https://gist.github.com/wfreeman/1158409
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.