Geeky Geeky - 2 months ago 6
CSS Question

How to add and remove class in a loop with jQuery

I have a 3 by 3 grid.
Red class needs to be added to my grid cells. It has to be continue from cell1 to cell 9, once it reaches cell9, it should start from cell1 again. At position cell2, it has to check if cell1 has red class, if so remove it and add "red" class to the cell2 and this process should continue forever.



$(document).ready(function () {

// setInterval(AddRedClass(), 1000)

});

function AddRedClass() {
var boxes = $('.box');
var boxLength = boxes.length - 1;
var lastChildIndex;

for (var index = 0; index < boxLength;) {

var currentBox = $(boxes[index]);
var lastChildIndex = (index == 0) ? boxLength : index - 1;
var prevBox = $(boxes[lastChildIndex]);

if (prevBox.hasClass('red'))
setTimeout(prevBox.removeClass('red'), 1000);

setTimeout(currentBox.addClass('red'), 1000);
index = (index + 1) % boxLength;
}

}

.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 250px;
}

.box {
width: 30%;
border: 1px solid green;
}

.red {
background: red!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>





Can someone please explain what is wrong with my code.

Thanks

Answer

jQuery's addClass method will actually add the class to a jQuery collection so you don't need to loop over it.

$('.box').addClass('red');

However, it looks like you want to animate a collection of boxes. If that's the case, you have a whole new set of problems.

Executing all of this in a loop will happen so fast you probably won't even notice it. What you need to do is a recursive function with setTimeout:

animateBoxes();

function animateBoxes() {
    var $boxes = $('.box'); // prefix the variable name with a $ to identify it as a jquery object, totally optional
    var boxLength = $boxes.length - 1;
    var lastChildIndex;

    addRedClass(0); // pass 0 in the first index
}

function addRedClass(index) {
    var $currentBox = $boxes.eq(index);
    var lastChildIndex = (index == 0) ? boxLength - 1 : index - 1;
    var $prevBox = $boxes.eq(lastChildIndex);
    $boxes.removeClass('red'); // remove red class from all boxes
    $currentBox.addClass('red');

    setTimeout(function () { // set timeout needs a callback function, you cant just pass the function directly
        index = (index + 1) % boxLength; // increment index
        addRedClass(index);
    }, 1000);
}

I didn't test it but this is an approach that will be effective in doing what you're trying to accomplish.

Comments