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>

http://jsfiddle.net/RMR42/

Lie Ryan · Accepted Answer · 2014-04-12 02:56:38Z

4

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]);
    });
});

answered Apr 12, 2014 at 2:56

Lie Ryan

65.3k14 gold badges103 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3525807 Over a year ago

I know we're supposed to avoid 'thanks' as comments, but this is the best. I haven't used SO before and am blown away by the community. Thank you very much, and the same for everyone else.

bjb568 · Accepted Answer · 2014-04-12 02:58:16Z

1

http://jsfiddle.net/RMR42/1/

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.

answered Apr 12, 2014 at 2:58

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

Comments

serakfalcon · Accepted Answer · 2014-04-12 02:58:00Z

0

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>

answered Apr 12, 2014 at 2:58

serakfalcon

3,5311 gold badge25 silver badges35 bronze badges

4 Comments

bjb568 Over a year ago

What if there are more then one parent? Some children only?

serakfalcon Over a year ago

there can't be more than one parent since it selects for the ID but there could be multiple levels of children, you'd have to adjust accordingly with further selectors. iterating through the DOM as your answer works better as a more general case but getElementByClassName is a bit slow.

bjb568 Over a year ago

True, but you wrote that case specifically for it to work with your limited code :)

bjb568 Over a year ago

It depends on whether OP was providing his code or an example, and whether OP will ever modify it.

Vijay · Accepted Answer · 2014-04-12 03:46:02Z

0

$(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

answered Apr 12, 2014 at 3:46

Vijay

3,0231 gold badge17 silver badges24 bronze badges

1 Comment

bjb568 Over a year ago

OP didn't want just any color, OP defined the colors.

Collectives™ on Stack Overflow

How can I randomize the value of CSS attributes using jquery?

4 Answers 4

1 Comment

Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related