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都需要以不同的方式定位，我不想像.something那样制作10个副本，并将每个副本指向不同的类，因为它只需要改变位置。

另外，我正在使用JQuery为这些div设置动画，例如：

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

但是这会激活附属于该类的所有div吗？有没有办法解决这个问题？

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设置动画

。

Answer 2

您可以使用每个对象一次引用一个对象。

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

Answer 3

将id添加到<div> s：

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

将您的定位CSS移出.something并进入：

#one {
    left: 20px;
}

#two {
    left: 40px;
}

使用选择器进行动画处理：

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

Answer 4

我不确定我是否帮助你。但您也可以使用动画增加值。

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

这将是100px到每个拥有“某事”类

的Dom元素的顶部

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

4 个答案: