How to set different positions for multiple elements with the same class

Question

I have a CSS class:

.something{
//all my css stuff here
}

I have 10 different elements that use this class:

<div class='something'></div>
<div class='something'></div>
<div class='something'></div>
<div class='something'></div>
<div class='something'></div> //ect ect....

Each of those divs need to be positioned differently and I don't want to make like 10 copy's of .something and point each one at a different class because its only the position that needs to change.

Also, I'm using JQuery to animate these divs, like:

$('.something').animate();

But that will animate all the divs attached to that class right? Is there any way around that?

Answer 1

You can specify an ID as well. So, you can do something like this:

<div class="something" id="s1"></div>
<div class="something" id="s2"></div>

Then:

$('#s1').animate({ ... }, speed); // animation of element 1
$('#s2').animate({ ... }, speed); // different animation of element 2

And still apply styles like:

.something {
    /* css */
}

Or, alternatively, you can not use IDs and simply loop: edited for simplicity

$('.something').animate({"top": "+=100px"}, speed);

If you'll be animating each div in somewhat the same way.

Answer 2

You can use each to reference every object one at a time.

$('.classname').each(function(){ });