Iteracja po kontenerach

0

Siemka,
mam taki problem, muszę napisać skrypt, który iteruje po divach o klasie row co 2 sekundy i dodaje im klasę active. Po zakończeniu iteracji zaczyna od nowa i tak w nieskończoność.
To co udało mi się uzyskać:

function colorInterval() {
    var row = document.querySelectorAll(".row");
    var index = 0;
    var interval = setInterval(function() {
        row[index++].classList.add("active");
        if (index === row.length) {
            [].forEach.call(row, function(el) {
                el.classList.remove("active");
                colorInterval();
            });
        }
    }, 2000);
}
colorInterval();

oraz przykładowy HTML

<div class="container">
<div class="row"><span class="btn-link">Klik</span></div>
<div class="row"><span class="btn-link">Klik</span></div>
<div class="row"><span class="btn-link">Klik</span></div>
<div class="row"><span class="btn-link">Klik</span></div>
<div class="row"><span class="btn-link">Klik</span></div>
</div>
1

Chyba wystarczy tak:

setInterval(() => Array.from(document.getElementsByClassName("row")).forEach(row => row.classList.add("active")), 2000);
0

@Markuz: ale to wtedy dodaje active do wszystkich jednocześnie zamiast każdy z divów po kolei co 2 sekundy z tego co patrzę
Dobra zrobiłem poprawkę i działa :) Tyle, że na ostatnim elemencie zamiast poczekać 2 sekund to od razu przechodzi i zaczyna od nowa.
Ktoś wie co zrobić aby na ostatnim elemencie zatrzymał się te 2 sekundy?

function colorInterval() {
    var row = document.querySelectorAll(".row");
    var index = 0;
    var interval = setInterval(function() {
        row[index++].classList.add("active");
        if (index === row.length) {
            [].forEach.call(row, function(el) {
                el.classList.remove("active");
                colorInterval();
                index = 0; 
            });
        }
    }, 2000);
}
colorInterval();

Chociaż chyba nadal nie jest to zbyt dobre rozwiązanie, gdyz po dluzszym czasie obciaza mocno stronę i głupieje...

0

O coś takiego Ci chodzi?

const divs = document.querySelectorAll('.row');

const func = () => {
  let index = 0;

  const interval = setInterval(() => {
    divs[index].classList.add('active');
    index++;

    if (index === divs.length) {
      clearInterval(interval);

      setTimeout(() => {
        divs.forEach(div => div.classList.remove('active'));

        func();
      }, 2000);
    }
  }, 2000);
}

func();
0

@angry bread: Tak, ekstra. Wielkie dzięki :D
Jedynie pomyślałem, że będę jednak potrzebował drobną przeróbkę, że klasa zostaje dodana do diva po czym po 2 sekundach jest zabierana i dodawana do kolejnego itd.; ale to myślę, że dam radę:)
Rozwiązanie z tego postu wrzucam dla potomnych :)

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row.active .btn-link {
               color: red;
         }
    </style>
</head>

<body>
    <div class="container">
        <div class="row"><span class="btn-link">Klik</span></div>
        <div class="row"><span class="btn-link">Klik</span></div>
        <div class="row"><span class="btn-link">Klik</span></div>
        <div class="row"><span class="btn-link">Klik</span></div>
        <div class="row"><span class="btn-link">Klik</span></div>
    </div>
</body>

</html>

JS

const rows = document.getElementsByClassName("row");

setInterval(() => {
  const rowsArray = [...rows];
  const indexActive = rowsArray.findIndex(row => row.classList.contains("active"));
  const indexNext = (indexActive + 1) % rowsArray.length;
  rowsArray[indexNext].classList.add("active");
  rowsArray[indexActive].classList.remove("active");
}, 2000);

1 użytkowników online, w tym zalogowanych: 0, gości: 1