如何将类依次添加到列表中的每个元素？

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（）？每个（）创建一个可以迭代的数组或jQuery对象吗？

- chasethesunnn

---

您可以使用JS读取transition属性，以相应地调整延迟。 - Alex

@mvp 我不知道这可以做到。谢谢！ - chasethesunnn

Answer 1

你可以使用 setTimeout 函数：

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

以上代码假定CSS动画持续时间为1秒。您可以相应地进行更改！

注意：在setTimeout回调函数的上下文中，this不是指当前元素。您应该缓存each回调的this对象或使用each回调的第二个参数，该参数指向集合中的当前元素。

- Ram

---

党，你以微弱的优势赢了我。 - shennan

@vohuman 所以只是为了理解而言；i是类似于each()创建的类数组对象的索引，而el类似于this？我知道el ≠ this，但它们相似吗？ - chasethesunnn

@NilsR each 回调函数中的 el 和 this 值都指向同一个元素。 - Ram

Answer 2

为什么不将动画持续时间放入变量中，并使用 setTimeout？

var animationDuration = 2000; // 2000 millieseconds

function animateItems(){
   $('ul li a').each(function(i, item) {
      setTimeout(function(){
        $(item).addClass('animate');
      }, i * animationDuration); // this multiplies the index by the duration so the handler is fired in sequence
   });
}

另一种选择是使用JavaScript动画事件。

- shennan

---

@RickHitchcock 刚刚注意到那 :-) - shennan

Answer 3

在JavaScript中，当你想要安排代码在未来运行时，通常会使用setTimeout和setInterval函数，但是没有像"Thread.Sleep"这样的阻塞指令。

animateItems();
function animateItems(){
   $('ul li a').each(function(i) {

       setTimeout(function(){
           console.log(i);
           $(this).addClass('animate'); //This doesn't run one at a time
       }, i * 1000);

   });
}

- Eduardo Wada

---

请注意，在此上下文中，“this”指的是窗口。 - Rick Hitchcock

Answer 4

getElementsByClassName可以创建一个HTMLCollection，但这个集合不能直接使用for/in循环迭代，不过使用foreach循环遍历HTMLCollection元素可能会有所帮助。将HTMLCollection转换为数组，请参考此处。不幸的是，我对这些集合不熟悉，无法提供更多信息。

在你拥有数组之后，遍历它们应该很容易。应用每个动画，包括setTimeout。

- ninjabugs