如何为同一类的多个元素设置不同的位置

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

本文关键字：元素 设置 位置 一类      更新时间：2023-09-26

我有一个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，并将每个指向不同的类，因为它只是需要改变的位置。

另外，我使用JQuery动画这些div，如:

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

但是这会使所有附加到那个类的div动画化，对吧?有别的办法吗?

也可以指定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，只使用loop: 编辑为简单性

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

如果你想让中的每个div以相同的方式动画

可以使用each来一次引用一个对象。

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

将id s添加到<div> s:

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

将你的定位CSS从.something移到:

#one {
    left: 20px;
}
#two {
    left: 40px;
}

使用选择器进行动画:

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

我不确定我是否理解对了。但是你也可以用animate.

来增加这个值。
$('.something').animate({"top": "+=100px"},300);

这将在每个类别为something的Dom元素的顶部添加100px

相关文章：