如何为具有相同类的多个元素设置不同的位置

Question

我有一个CSS类：

.something{
//all my css stuff here
}

我有10个不同的元素使用了这个类：

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

每个div需要有不同的定位方式，并且我不想复制10次.something并将每一个指向不同的class，因为只需要改变位置。

另外，我正在使用JQuery来动画显示这些div，例如：

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

但这会激活所有附加到该类的div，有没有什么解决方法？

- user849137

---

请耐心等待……好的，如果这有帮助的话……（脱掉衣服）。 - Mike Robinson

哈哈，你知道我想表达什么... - user849137

Answer 1

你也可以指定一个ID。因此，你可以像这样做：

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

然后：

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

并且仍然可以应用样式，例如：

.something {
    /* css */
}

或者，作为替代方案，您可以不使用ID并简单循环：为简化而编辑。

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

如果您将以某种程度相同的方式对每个div进行动画处理。

- wanovak

---

我正准备用完全相同的回答来回答。 - Graham

仅供记录，也允许多个类：<div class="something else"> - bfavaretto

或者你可以直接使用 $(".something").animate({"top": "+=300px"}, 300); 而不需要 each... 哦，还有你忘记在 animate 方法中指定速度了。 - meo

太棒了，那么在CSS中我只需要这样写：.something#s1{top:1px;},.something#s2{top:1px;}等等？ - user849137

@nav 是的，你也可以使用多个类。 - meo

你可以直接使用 #s1 和 #s2。 - wanovak

Answer 2

你可以使用 "each" 来逐个引用每个对象。

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

- Nikolay Dyankov

---

你能将.each()和计数器结合起来吗？你如何区分每个<div>？ - Wex

你可以在函数内部使用$(this)，如果你想计算div的数量，只需声明一个变量并在函数体中放置varName++; - Nikolay Dyankov

没错！例如，如果你输入$('.classname').each(function(){ $(this).addClass('newClassName'); }); 这将会给每个对象添加一个新的类。如果你需要更多关于任何jquery函数的信息，只需访问api.jquery.com，这是一个非常好的资源，我一直在使用它。 - Nikolay Dyankov

Answer 3

为你的 <div> 元素添加 id 属性：

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

将您的定位CSS从.something中移出，并放入：

#one {
    left: 20px;
}

#two {
    left: 40px;
}

使用选择器进行动画：

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

- ThinkingStiff

Answer 4

我不确定我是否理解正确。但是你也可以通过动画来增加值。

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

这将会在每个具有类名“something”的Dom元素顶部添加100px

- meo