javascript - 如何向列表中的每个元素逐一添加类

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动画时长为1s。您可以相应地更改它!

注意:setTimeout 回调函数上下文中的this 不引用当前元素。您应该缓存 each 回调的 this 对象，或者使用 each 回调的第二个参数，它引用集合中的当前元素.