Question

im having a huge div with a grid inside, 30 items in 3 columns. but i have to add some classes to show them in the right way. like adding prefix_1 for the first one, prefix_2 for the second and 3th. also a alpha and a omega class. like you can see below.

im doing it with jquery at the moment, but thats very slow.

can someone help me to improve the jquery code?
or tell me how to do it in css, and that it will still work in ie7/ie8

for(var i=0;i<30;i+3)
{
    $('.docs').eq(i).addClass('prefix_1');
}

for(var i=1;i<30;i+3)
{
    $('.docs').eq(i).addClass('prefix_2').addClass('alpha');
}

for(var i=2;i<30;i+3)
{
    $('.docs').eq(i).addClass('prefix_2').addClass('omega');
}

Answer 1

I would strongly recommend using the .each function of a selection.

http://api.jquery.com/each/

$('.docs').each( function (index){
   if(index%3 == 0){
      $(this).addClass('prefix_1');
   }
   if(index%3 == 1){
      $(this).addClass('prefix_2');
      $(this).addClass('alpha');
   }
   if(index%3 == 2){
      $(this).addClass('prefix_2');
      $(this).addClass('omega');
   }
});

This will iterate over all the elements once. Though, if you are having slowdown issues adding classes to 90 elements, it may not be a problem with jquery or javascript.