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

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

您没有按班级名称访问，

将$（“ ticker-item”）。each更改为$（“。ticker-item”）。each（类选择器）

Answer 3

根据定义， 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>