Add classes to multiple HTML elements with a loop

Question

I'm creating a color wheel that has 360 colors. The gist of my markup looks like this:

HTML:

<table class="table1">
  <td class="medium-grey"></td>
  <td class="charcoal"></td>
  <td class="black"></td>
  ...

CSS:

.medium-grey { background-color: #76878e; }
.charcoal { background-color: #534259; }
.black { background-color: #060807; }

I am adding a background color via CSS to each td. I have alot of colors to manually add to each table and am finding this cumbersome. I am curious if there's a way I can loop through groups of colors to append to td classes with javascript or sass mixins.

taesu · Accepted Answer · 2015-02-13 16:51:56Z

1

var css_classes =['medium-grey' , 'charcoal', 'black'];

var idx = 0
$( "table.table1 td" ).each(function( index ) {
    $(this).addClass(css_classes[idx]);
    if (idx < css_classes.length-1){
      idx+=1;
    }else{
      idx = 0;
    }
});

given css classes, iterate td, and assign css classes in order.

refer to : jsfiddle

edited Feb 13, 2015 at 16:51

answered Feb 13, 2015 at 16:44

taesu

4,5905 gold badges26 silver badges41 bronze badges

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

1 Comment

andy4thehuynh Over a year ago

Baller. This is what I wanted

Collectives™ on Stack Overflow

Add classes to multiple HTML elements with a loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related