如何将类应用于嵌套数组中的所有元素，但在将同一个类应用于下一个嵌套数组之前有一个间隔？
如何将类应用于嵌套数组中的所有元素，但在将同一个类应用于下一个嵌套数组之前有一个间隔？
提问于 2022-07-07 15:37:37
我今天的目标是对嵌套数组中的所有元素应用一个类，并等待1秒的延迟，然后将相同的类应用于下一个嵌套数组的所有元素，并删除应用于前一个嵌套数组的类。目前，我的类被同时应用于所有嵌套数组的所有元素。这是我所能得到的我的代码，因为我不知道如何继续。对于如何使用JavaScript或Jquery解决这一问题，我们将不胜感激。
let sequencing = [["01-01", "02-01", "03-01"],["01-02", "02-02", "03-02"],["01-03", "02-03", "03-03"],["01-04", "02-04", "03-04"]];
// This loop is for outer array
for (let i = 0; i < sequencing.length; i++) {
// console.log(sequencing[i]);
// This loop is for inner-arrays
for (var j = 0; j < sequencing[i].length; j++) {
//console.log(sequencing[j]);
// Accessing each elements of inner-array
$("#"+sequencing[i][j]).addClass("up");
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-07 16:01:01
要执行所需的操作，可以使用setTimeout()将类的添加延迟为nIteration * 1000毫秒。您还可以使用removeClass()从前一组元素中删除类。
还请注意在下面的示例中使用forEach()使代码略显简洁。
let sequencing = [["01-01", "02-01", "03-01"],["01-02", "02-02", "03-02"],["01-03", "02-03", "03-03"],["01-04", "02-04", "03-04"]];
sequencing.forEach((arr, i) => {
setTimeout(() => {
$('.up').removeClass('up');
arr.forEach(id => $('#' + id).addClass('up'));
}, i * 1000);
});.up {
background-color: #C00;
color: #FFF;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="01-01">01-01</div>
<div id="02-01">02-01</div>
<div id="03-01">03-01</div>
<div id="01-02">01-02</div>
<div id="02-02">02-02</div>
<div id="03-02">03-02</div>
<div id="01-03">01-03</div>
<div id="02-03">02-03</div>
<div id="03-03">03-03</div>
<div id="01-04">01-04</div>
<div id="02-04">02-04</div>
<div id="03-04">03-04</div>
Stack Overflow用户
发布于 2022-07-07 16:21:31
请考虑以下几点。
$(function() {
var sequencing = [
["01-01", "02-01", "03-01"],
["01-02", "02-02", "03-02"],
["01-03", "02-03", "03-03"],
["01-04", "02-04", "03-04"]
];
$.each(sequencing, function(i, part) {
setTimeout(function() {
$.each(part, function(j, id) {
$("#" + id).addClass("up")
});
}, i * 1000);
});
});.up {
border: 1px solid #ccc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="01-01">
01-01
</div>
<div id="02-01">
02-01
</div>
<div id="03-01">
03-01
</div>
<div id="01-02">
01-02
</div>
<div id="02-02">
02-02
</div>
<div id="03-02">
03-02
</div>
<div id="01-03">
01-03
</div>
<div id="02-03">
02-03
</div>
<div id="03-03">
03-03
</div>
<div id="01-04">
01-04
</div>
<div id="02-04">
02-04
</div>
<div id="03-04">
03-04
</div>
这将为每个迭代创建一个唯一的超时。首先，超时是0 (0 * 1000)，然后是1000 (1 * 1000)，等等.
这将为每个迭代的异步执行创建正确的暂停时间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72900647
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号