How to change class name after X seconds of time using Jquery

I want to loop the class name ‘move’ over all the divs, so if the first div has the class name ‘move’, i want to remove it and then add it to the next element in every three seconds

   $(document).ready(function () {

               setInterval(swapUsp, 3000);

               function swapUsp() {

                   var active = $('#infobarContainer .uspTag');
                   var next = ($('#infobarContainer .uspTag').next().length > 0) ? $('#infobarContainer .uspTag').next() : $('#infobarContainer .uspTag:first');
                   if (active.hasClass('move')) {
                       active.removeClass('move')
                           next.addClass('move');
                   }
                  
               }
           });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="infobarContainer">
  <div class="uspTag tagline tagline2 move">
                          USP 1

                        </div>
                        <div class="uspTag tagline tagline2">
                           USP 2
                        </div>
                          <div class="uspTag tagline tagline2">
                           
                          USP 3
                        </div>
                          <div class="uspTag tagline tagline2">
                          USP 4
                        </div>
                        </div>

Answer

const divs=[...document.querySelectorAll(".tagline2")]; 
divs.i=0;
setInterval(function(){
 divs[divs.i++].classList.remove("move");
 divs[divs.i=divs.i%divs.length].classList.add("move")
},500);

.move {background-color:red}

<div class="infobarContainer">
  <div class="uspTag tagline tagline2 move">
    USP 1
  </div>
  <div class="uspTag tagline tagline2">
    USP 2
  </div>
  <div class="uspTag tagline tagline2">
    USP 3
  </div>
  <div class="uspTag tagline tagline2">
    USP 4
  </div>
</div>

Advertisement

Answer