Problem on adding and removing a class in a group of items continuously
Could you please let me know how I can add a class to each .col-md-3
and remove it after 5 seconds?
<div class="container">
<div class="row">
<div class="col-md-3">Mapping</div>
<div class="col-md-3">Coding</div>
<div class="col-md-3">Network</div>
<div class="col-md-3">Application</div>
</div>
</div>
body{
padding:25px;
}
.red{
color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
setInterval(function(){
$(".col-md-3").each(function(){
$(this).toggleClass('red')
});
}, 2000)
As you can see this adds a class to the whole element, but I need to do it one at a time
+3
source to share
4 answers
You can use setInterval () like
setInterval(function() {
$curr = $curr.removeClass('red').next();
if (!$curr.length) {
$curr = $('.col-md-3').first()
}
$curr.addClass('red');
}, 2000);
var $curr = $('.col-md-3').first().addClass('red');
body {
padding: 25px;
}
.red {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-3">Mapping</div>
<div class="col-md-3">Coding</div>
<div class="col-md-3">Network</div>
<div class="col-md-3">Application</div>
</div>
</div>
+2
source to share
You can use the following snippet:
setInterval(function(){
var $next = $('.col-md-3.red + .col-md-3').length ? $('.col-md-3.red + .col-md-3') : $('.col-md-3').first();
$('.col-md-3.red').add($next).toggleClass('red')
}, 2000);
$('.col-md-3').first().addClass('red'); // should be set in HTML markup instead
body{
padding:25px;
}
.red{
color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-3">Mapping</div>
<div class="col-md-3">Coding</div>
<div class="col-md-3">Network</div>
<div class="col-md-3">Application</div>
</div>
</div>
+6
source to share
Use the following solution:
setInterval(function () {
$curr = $curr.removeClass('red').next();
if (!$curr.length) {
$curr = $('.col-md-3').first()
}
$curr.addClass('red');
}, 5000);
var $curr = $('.col-md-3').first().addClass('red');
Refer to this example: http://jsfiddle.net/ap4hdkLy/
0
source to share
Make a function that finds the active class .red
. Find the index and add it to it. If it reaches cardinality .col-md-3
or is not found at all, set the next index to zero.
function loopClass() {
var col = $('.row .col-md-3');
var active = $('.row .red').index();
var next = 0;
if( active != -1 && active != ( col.length - 1 ) )
next = active + 1;
col.removeClass('red').eq( next ).addClass('red');
}
$(function(){
setInterval( function() { loopClass(); }, 500);
});
.red{ color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-3">Mapping</div>
<div class="col-md-3">Coding</div>
<div class="col-md-3">Network</div>
<div class="col-md-3">Application</div>
</div>
</div>
0
source to share