случайное изменение класса в существующем списке элементов

Question

процесс должен быть таким: я контролирую, сколько элементов присутствует; Я создаю уникальный случайный массив этих чисел; Я использую случайную последовательность, чтобы назначать класс соответствующему элементу каждые 5 секунд. Но это не работает. что я сделал не так?

html

<div class="wrapper-sx">
    <h4>...</h4>
    <h4>...</h4>
</div>

jquery

var items = $("#working .wrapper-sx").find("h4");
var number = items.length;
var arr = [];
while(arr.length < number){
    var r = Math.floor(Math.random() * number) + 1;
    if(arr.indexOf(r) === -1) arr.push(r);
};
console.log(arr);
for (i = 0; i < number; i++) {
    setInterval(function () {
        items.removeClass("active");
        items.eq(arr[i]).addClass("active");
        console.log(i);
    }, 5000);
};

большое спасибо

Answer 1

Думаю решил вопрос:

    var items = $(".wrapper-sx").find("h4");
    var item_number = items.length;
    var arr = [];
    while(arr.length < item_number){
        var r = Math.floor(Math.random() * item_number);
        if(arr.indexOf(r) === -1) arr.push(r);
    };
    var indexElement = 0;
    setInterval(function () {
        if(indexElement<item_number){
            items.removeClass("active");
            items.eq(arr[indexElement]).addClass("active");
            indexElement++;
        } else{
            indexElement = 0;
        }
     }, 5000);

всем спасибо;)

Answer 2

Это потому, что ваш селектор parent-div неверен. У вас нет элемента с идентификатором #working. Кроме того, если вам нужна какая-то анимация, я бы предложил разместить setInterval() за пределами l oop.

var items = $(".wrapper-sx").find("h4");
var number = items.length;
//console.log(number);

setInterval(function () {
let r =  Math.floor(Math.random() * number); //note that now for each iteration I am forming a new randowm number
console.log(r+1);
for (i = 0; i < number; i++) {
        $(items[i]).removeClass("active");
        if(i === r){
          $(items[i]).addClass("active");
        }
        //console.log(i);
   
}
 }, 5000);

.active{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-sx">
    <h4>1</h4>
    <h4>2</h4>
    <h4>3</h4>
    <h4>4</h4>
    <h4>5</h4>
    <h4>6</h4>
    <h4>7</h4>
    <h4>8</h4>
    <h4>9</h4>
    <h4>10</h4>
</div>

Я добавил css для визуального представления