How can i apply a class to all elements inside a nested array but with an interval before apply the-CodePudding

My Goal today is to apply a class to all elements inside a nested array and wait a 1-sec delay before applying the same class to all elements of the next nested array and removing the class applied to the previous nested array. At the moment my class is been applied to all elements of all nested arrays simultaneously. This is as far as I can get with my code as I don't know how to proceed. Any help on what to look for to solve this with JavaScript or Jquery will be much appreciated.

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");
   
  }  
 }

CodePudding user response：

To do what you require you can use setTimeout() to delay the adding of the class by nIteration * 1000 miliseconds. You can also use removeClass() to wipe the class from the previous set of elements.

Also note the use of forEach() in the following example to make the code slightly more succinct.

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>

CodePudding user response：

Consider the following.

$(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>

This creates a unique timeout for each iteration. On first pass, the timeout is 0 (0 * 1000), then 1000 (1 * 1000), etc...

This creates the correct pause time for the Async execution of each iteration.