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
JavaScript
x
15
15
1
$(document).ready(function () {
2
3
setInterval(swapUsp, 3000);
4
5
function swapUsp() {
6
7
var active = $('#infobarContainer .uspTag');
8
var next = ($('#infobarContainer .uspTag').next().length > 0) ? $('#infobarContainer .uspTag').next() : $('#infobarContainer .uspTag:first');
9
if (active.hasClass('move')) {
10
active.removeClass('move')
11
next.addClass('move');
12
}
13
14
}
15
});
JavaScript
1
17
17
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<div class ="infobarContainer">
3
<div class="uspTag tagline tagline2 move">
4
USP 1
5
6
</div>
7
<div class="uspTag tagline tagline2">
8
USP 2
9
</div>
10
<div class="uspTag tagline tagline2">
11
12
USP 3
13
</div>
14
<div class="uspTag tagline tagline2">
15
USP 4
16
</div>
17
</div>
Advertisement
Answer
JavaScript
1
6
1
const divs=[document.querySelectorAll(".tagline2")];
2
divs.i=0;
3
setInterval(function(){
4
divs[divs.i++].classList.remove("move");
5
divs[divs.i=divs.i%divs.length].classList.add("move")
6
},500);
JavaScript
1
1
1
.move {background-color:red}
JavaScript
1
14
14
1
<div class="infobarContainer">
2
<div class="uspTag tagline tagline2 move">
3
USP 1
4
</div>
5
<div class="uspTag tagline tagline2">
6
USP 2
7
</div>
8
<div class="uspTag tagline tagline2">
9
USP 3
10
</div>
11
<div class="uspTag tagline tagline2">
12
USP 4
13
</div>
14
</div>