如何将一个类应用于嵌套数组中的所有元素，但在将同一类应用于下一个嵌套数组之前有一个间隔？

Question

我今天的目标是将一个类应用于嵌套数组中的所有元素并等待 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");
   
  }  
 }

Answer 1

要执行您需要的操作，您可以使用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>

Answer 2

考虑以下。

 $(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)，等等...

这为每次迭代的异步执行创建了正确的暂停时间。