[英]Looping through unordered list to add and remove classes
I am trying to iterate through an unordered list and loop through each list item (with the class of ticker-item ) and temporarily append a class to it so that CSS can apply some transitions to it). 我正在尝试遍历无序列表,并遍历每个列表项(带有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);
});
I've searched through various SO articles, and I'm confident that the function will add and remove the classes correctly, but it doesn't currently seem to be applying the li's? 我搜索了各种SO文章,并且我相信该函数将正确添加和删除类,但是当前似乎不使用li的吗?
And here is the HTML: 这是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* & <strong>Free</strong> Returns 📦</p>
</a>
</li>
</ul>
</div>
You do not loop through elements with the class ticker-item
, you loop through elements that are like this: <ticker-item> ... </ticker-item>
您不使用类
ticker-item
遍历元素,而是遍历如下元素: <ticker-item> ... </ticker-item>
To change your loop you have to use the class-selecter: 要更改循环,您必须使用类选择器:
$(".ticker-item").each
you are not accessing by class name, 您没有按班级名称访问,
change $("ticker-item").each to $(".ticker-item").each (class selector) 将$(“ ticker-item”)。each更改为$(“。ticker-item”)。each(类选择器)
The addClass
nor removeClass
are using the queue by definition. 根据定义,
addClass
和removeClass
都在使用队列。 So jQuery#delay
will have no effect on these methods. 因此
jQuery#delay
将对这些方法无效。
The solution is to execute both of them into queued callbacks in order for them to be pushed into the queue, like the following: 解决方案是将它们都执行到排队的回调中,以便将它们推入队列,如下所示:
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>
And I made a example below to chaining your animation. 我在下面举了一个链接动画的示例。
Note that I didn't use setTimeout
but I only used jQuery#delay
, as I find that's cleaner. 请注意,我没有使用
setTimeout
而是只使用jQuery#delay
,因为我发现它更干净。
Also, don't forget to dequeue your animations if you want to reexecute them without refreshing your page. 另外,如果要在不刷新页面的情况下重新执行动画,请不要忘记使动画出队。
$('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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.