循环遍历无序列表以添加和删除类

Question

我正在尝试遍历一个无序列表并循环遍历每个列表项（使用 ticker-item 类）并临时附加一个类，以便 CSS 可以对其应用一些转换)。

var a = [];
$(".ticker-item").each(function(index) {
  a[index] = $(this);
  setTimeout(function() {
    a[index].addClass('current').delay(500).queue(function(next) {
      a[index].removeClass('current');
      next();
    });
  }, index * 500);
});

我搜索了各种 SO 文章，我确信该函数将正确添加和删除类，但目前似乎没有应用 li 的？

这是 HTML：

      <div class="ticker">
        <ul class="ticker-items">
            <li class="ticker-item">
                <a href="/categories/featured/summer-sale/1185">
                    <p><strong>Summer Sale</strong>???? Now more things at <strong>50% off!</strong></p>
                </a>
            </li>
            <li class="ticker-item">
                <a href="/about">
                    <p>Things for kids you'll ???? too. <strong>Our story</strong></p>
                </a>
            </li>
            <li class="ticker-item">
                <a href="/help/delivery-and-returns">
                    <p><strong>Free</strong> Delivery* &amp; <strong>Free</strong> Returns ????</p>
                </a>
            </li>
        </ul>
    </div>

Answer 1

您不会循环遍历具有类 ticker-item 的元素，而是遍历像这样的元素：<ticker-item> ... </ticker-item>

要改变你的循环，你必须使用类选择器：

$(".ticker-item").each

Answer 2

addClass 和 removeClass 按定义使用队列。所以jQuery#delay 不会对这些方法产生影响。

解决方案是将它们都执行到队列回调中，以便将它们推送到队列中，如下所示：

setTimeout(() => {
  $('#noqueue')
    .addClass('colored')
    .delay(2000)
    .removeClass('colored');
  
  $('#queue')
    .queue(function(next) {
      $(this).addClass('colored');
      next();
    })
    .delay(2000)
    .queue(function() { $(this).removeClass('colored'); });
}, 1000);

div {
  transition: color .5s;
}

.colored {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="noqueue">no queue</div>
<div id="queue">with queue</div>

我在下面做了一个例子来链接你的动画。

请注意，我没有使用setTimeout，但我只使用了jQuery#delay，因为我发现它更干净。

此外，如果您想在不刷新页面的情况下重新执行动画，请不要忘记将动画出列。

$('button').on('click', () => {
  $('ul > li').each((i, li) => {
      $(li)
        .delay(500 * (i + 1))
        .queue(next => {
          $(li).addClass('colored');
          next();
        })
        .delay(750)
        .queue(() => ($(li).removeClass('colored'), $(li).dequeue()));
  });
});

ul > li {
  transition: color 1s;
}

.colored {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<button>Color them!</button>

Answer 3

你没有按类名访问，

将 $("ticker-item").each 更改为 $(".ticker-item").each（类选择器）