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?

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?

• javascript
• jquery
• html
• css

• 3 "Bare with me"...well ok, if it helps... <removes clothes> – Mike Robinson Commented Dec 20, 2011 at 18:40
• haha you know what I meant... – user849137 Commented Dec 20, 2011 at 18:44

4 Answers 4

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.

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

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

Add ids to your <div>s:

<div class="something" id="one"></div>
<div class="something" id="two"></div>

Move your positioning CSS out of .something and into:

#one {
    left: 20px;
}

#two {
    left: 40px;
}

Animate using the selector:

$( '#one' ).animate();

I'm not sure if i got you right. But you can also increase the value with animate.

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

This is gonna ad 100px to the top of every Dom element that has the class "something"