CODEWITHSUNDEEP
javascriptjquery
user2137425
user2137425

Reputation: 105

Add and remove class from list using jquery

I have an unordered HTML list such as this:

<ul>
    <li class="current"></li>
    <li></li>
    <li></li>
</ul>

Using jquery, I would like to automatically remove the current class from the first li element and add it to the second class. After a short period of time I would like to remove the class from the second li element and add it to the third. I would like for this to repeat as well.

I have this so far but it's not at all what I need:

 $("ul li:first-child").addClass('current').delay(1000).queue(function(next){
    $(this).removeClass('current');
    $(this).next().addClass('current')
    next();
});

Upvotes: 4

Views: 2137

Answers (6)

Sangrai
Sangrai

Reputation: 687

Add and remove class unorder list current class using the jQuery click event. **

Working Example

** 

$(document).on('ready', function() {
		
      $('.list-1 li').each(function(){
			var t = $(this);
			t.find('a').click(function(){
				$('li.current').removeClass('current');
				t.addClass('current');
			});
			
		});

    });
 .list-1 li a{text-decoration:none; color:#444; background:#ddd; padding:5px 15px 10px;}
	.list-1 li.current a{background:tomato; color:#fff;}
  .list-1{display:flex; flex-wrap:wrap;min-width:140px}
   .list-1 li{padding:5px;margin:0 0 15px;display:block;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
   
    <ul class="list-inline list-1">
		<li class="current"><a href="#">Exapmle 1</a></li>
		<li><a href="#">Exapmle 2</a></li>
		<li><a href="#">Exapmle 3</a></li>
		<li><a href="#">Exapmle 4</a></li>
		<li><a href="#">Exapmle 5</a></li>
		<li><a href="#">Exapmle 6</a></li>
		<li><a href="#">Exapmle 7</a></li>
		<li><a href="#">Exapmle 8</a></li>
		<li><a href="#">Exapmle 9</a></li>
	</ul>

Upvotes: 0

Marcus
Marcus

Reputation: 5447

If you want to be able to stop and start it:

var myInterval;
var myFunc = function() {
        var cur = $('ul li.current');
        if(cur.index() == $('ul li').length - 1) {
            cur.removeClass('current');
            $('ul li:first').addClass('current');
        } else {
            cur.removeClass('current').next().addClass('current');
        }
    };
//Start Interval
myInterval = setInterval(myFunc, 1000);

Then, to stop/start: 

clearInterval(myInterval);
myInterval = setInterval(myFunc, 1000);

jsFiddle

Upvotes: 5

Ram
Ram

Reputation: 144659

var $li = $('ul li'), i = 0;

setInterval(function(){
    i++;
    if( $li.length === i ) i = 0;
    $li.removeClass('current').eq(i).addClass('current')
}, 1000);

http://jsfiddle.net/mr7J6/

Upvotes: 2

Ayush
Ayush

Reputation: 42440

If you need it to wrap around, you can do it using the modulus operator like this:

$(document).ready(function() {
    var targets = $('ul li');
    var len = targets.length;
    var i = 0;
    setInterval(function() {
        // remove from current
        $('li.highlight').removeClass('highlight');
        i = (i + 1) % len;
        targets.eq(i).addClass('highlight');
    }, 1000);
});

Demo

Upvotes: 0

Josh
Josh

Reputation: 3284

$(function(){ 
   move();
 });


function move(){
    $("ul li.current").delay(1000).queue(function(next){
        $(this).removeClass('current');
        if($(this).next().addClass('current').length){
           move();
         } 

     });
}

Upvotes: 0

j08691
j08691

Reputation: 207881

Try this:

var idx = 1;
setInterval(function () {
    $('ul li').removeClass('current').eq(idx).addClass('current');
    idx++;
    if (idx == $('ul li').length) idx = 0;
}, 1000);

jsFiddle example

Upvotes: 0

Related Questions