如何将列逐个添加到列表中的每个元素

Question

所以我想为列表中的每个元素(特别<a>是列表项中的每个元素)添加一个类,但是一次只添加一个.我这样做是因为它们<a>有一个CSS转换,我想让它们一次动画一个.所以item1动画,然后item2动画,然后item3动画......这是我到目前为止可以试图想出的东西.

HTML:

<ul>
    <li><a>item1</a></li>
    <li><a>item2</a></li>
    <li><a>item3</a></li>
    </ul>

jQuery的/ JS:

animateItems();
function animateItems(){
       $('ul li a').each(function() {
          $(this).addClass('animate'); //This doesn't run one at a time
       });
    }

我觉得这是导致递归的方向,但不确定.

更新:我刚刚意识到这可能比我想象的更难,因为jQuery需要知道css转换时间不是吗？有没有办法用setTimeout()添加类,直到它开始下一个addClass()？each()是否创建了一个可以迭代的数组或jQuery对象？

Answer 1

你可以使用这个setTimeout功能:

$('ul li a').each(function(i, el) {
   setTimeout(function() {
      $(el).addClass('...');
   }, i * 1000);
});

上面的代码假设CSS动画持续时间是1秒.你可以相应地改变它!

并且注意:this在setTimeout回调函数的上下文中没有引用当前元素.您应该缓存回调的this对象,each或者使用回调的第二个参数,该参数each引用集合中的当前元素.