javascript - Add and remove class from list using jquery - Stack Overflow

admin管理员组

文章数量:1336114

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();
});

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();
});

• javascript
• jquery

Share Follow asked Mar 5, 2013 at 20:46 user2137425user2137425 10511 silver badge55 bronze badges 3

• .delay() is specifically used for animations. – Belladonna Commented Mar 5, 2013 at 20:49
• 1 @LittleBigBot: .delay() is used for anything queued. That's why OP is using .queue() to run the delayed code. – the system Commented Mar 5, 2013 at 20:51
• Ah, I stand corrected. – Belladonna Commented Mar 5, 2013 at 20:55

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

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

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/mr7J6/

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

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


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

     });
}

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

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./bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis./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>

本文标签： javascriptAdd and remove class from list using jqueryStack Overflow