How can you grab elements in dom and apply different css without id?

Question

I am bit confused here. I am working on a dynamic project and I want to apply different css to divs which have same class but no id. How can I apply different css say to first div with same class, and then different css to second div of same class and so on... Let's say I have fullwidthContainer class applied to 3 divs For the first div, I want width 1000px, to the second I want 800px and so on. I can not give an id or another class here since it's dynamically generated. Please help.

Thanks.

Ok i did this using javascript

  function emphatic()
{
    var totalContainers=document.getElementsByClassName('fullwidthContainer')
    var className=1;

    for (var i = 0; i < totalContainers.length; i++) {
        className=className+1;
        totalContainers[i].setAttribute("class", "dropdown_5columns fullwidthContainer customMenuClass");
    };

}
emphatic();

Now how do i append classname with 1 added everytime to the new class. i mean something like customclass1, customclass2 and so on to divs.. thanks,

Answer 1

Perhaps you can use the element indexes although it's not entirely clear if you have relationships to match:

Example using increments based on index:

$('.someClass').each(function(index){
  $(this).width( 300 * (index+1) );
});

Example using array:

var widths =[ 600, 900, 500];

$('.someClass').each(function(index){
  $(this).width( widths[index] );
});

Array version could also be adapted to add classes.

Index starts at zero being first matching element in page