如何一次一个地定位同一<div> .class的多个实例?</div>

时间:2013-04-24 20:12:35

标签: javascript jquery arrays

我目前有同一类的x重复设置:

<div class="span3">..content1</div>
<div class="span3">..content2</div>
<div class="span3">..content3</div>

如何单独定位每个.span3类而不为每个类添加一些唯一ID?这甚至可能吗?

我想要做的是一次在每个.span3上应用一些动画,每次都有一点延迟 - 比如一次淡化一个.span3类或者做一些其他动画,比如从0到1。

试图找出我是否能以某种方式将它们添加到数组中?从那里开始,id能够遍历数组,做我想做的任何事情。

更多HTML上下文中的.span类:

<div class="row-fluid">
      <div class="span3">
        <span>Headline</span>
        <img src="images/thumb_1.gif" class="img-polaroid">
      </div>
      <div class="span3 frameColor_yellow">
        <span>Headline</span>
        <img src="images/thumb_2.gif" class="img-polaroid">
      </div>
</div>
<div class="row-fluid">
      <div class="span3">
        <span>Headline</span>
        <img src="images/thumb_3.gif" class="img-polaroid">
      </div>
      <div class="span3 frameColor_yellow">
        <span>Headline</span>
        <img src="images/thumb_4.gif" class="img-polaroid">
      </div>
</div>
//etc...

有什么建议吗?

3 个答案:

答案 0 :(得分:4)

喜欢这个 -

$('.span3').each(function(index,element){
    var sp = $(this);
    // do your stuff with this span
});

答案 1 :(得分:2)

试试这个:

$(".row-fluid > .span3").each(function (index) {
    $(this).delay(index * 500).animate({
        opacity: 0
    }, 500);
});

FIDDLE

根据@Rodrigo建议更新了答案!

答案 2 :(得分:0)

原则上你想把所有的span3都包装在一个容器里,让我们说吧

<div class="my-loop-divs">
   <div class="span3"></div>
   <div class="span3"></div>
</div>

我假设您使用的是zepto或jQuery

$(document).ready(function () {
    $('.my-loop-divs .span3').each(function (index, element) {
        // do the animation on $(this)
    });
});