jquery add a class and cycle it on the elements

Question

I have set of list elements like this

<ul>
    <li class="first"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="last"></li>
</ul>
<div class="prev">PREVIOUS</div>
<div class="next">NEXT</div>

I need to add a class active on the second and third li, and then when I click on the next button, those two classes will move by one down the list, to third and fourth list, until they reach the last li. Also when I click on previous button the classes would move up the lists.

So when my page loads I need to have this:

<ul>
    <li class="first"></li>
    <li class="active"></li>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="last"></li>
</ul>
<div class="prev">PREVIOUS</div>
<div class="next">NEXT</div>

Then when I click on the next button this happens

<ul>
    <li class="first"></li>
    <li></li>
    <li class="active"></li>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="last"></li>
</ul>
<div class="prev">PREVIOUS</div>
<div class="next">NEXT</div>

And so on. I have this so far:

$(window).load( function(){

var ul = $('ul'),
    li = ul.find('li');

var $prev=$('prev');
var $next=$('next');

li.eq(1).addClass('active');
li.eq(2).addClass('active');

$next.on('click', function(){
    if(li.hasClass('active')){
        li.removeClass('active');
    }
////stuck    

});

});

I've tried just using .next().addClass('active') , but that just adds active class on all the list items, and I don't need that.

Also can I have some kind of delay between removing and adding the classes? I'm using this as a carousel. On next my whole unsorted list moves to the left some amount of pixels, and that works. I need to add classes so that I can have opacity lowered on all, except those with active class, so I need to have a smooth transition.

Any help is appreciated.

Answer 1

First off, your selectors $('prev') and $('next') are trying to match elements with the tagnames prev and next . You mean .prev and .next , presumably.

Previous is easy, you simply need to .filter() your active list items, remove the class, traverse to the previous element, and add it back:

$prev.on('click', function(){
    li.filter('.active').removeClass('active').prev().addClass('active');
});

Next is (a little) trickier, since we need to reverse our jQuery object first:

$next.on('click', function(){
    $(li.get().reverse()).filter('.active').removeClass('active').next().addClass('active');
});

JSFiddle

Answer 2

Updated to make it also include the last and first li

Here is another way. You simple check if the next or previous element has the class first or last and don't change class if they do.

 var ul = $('ul'), li = ul.find('li'); var $prev = $('.prev'); var $next = $('.next'); li.eq(1).addClass('active'); li.eq(2).addClass('active'); $next.on('click', function() { var $a = $('.active'); if (!$($a[0]).next().hasClass('last')) // check if the first active li has next as last $a.removeClass('active').next().addClass('active'); }); $prev.on('click', function() { var $a = $('.active'); if (!$($a[1]).prev().hasClass('first')) // check if the last active li has prev as first $a.removeClass('active').prev().addClass('active'); }); 

 .active { background: lightblue !important; } .first, .last { background: red; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li class="first"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="last"></li> </ul> <div class="prev">PREVIOUS</div> <div class="next">NEXT</div> 

Answer 3

Made a FIDDLE with your problem and my solution :)

Added following:

var pointer = 1;

fixed (a dot was missing):

var $prev=$('.prev');
var $next=$('.next');

Updated this:

li.eq(pointer).addClass('active');
li.eq(pointer+1).addClass('active');

And updated your prev/next:

$next.on('click', function(){
  if(li.hasClass('active')){
      li.removeClass('active');
  }
  pointer++;

  li.eq(pointer).addClass('active');
  li.eq(pointer+1).addClass('active');
});

Answer 4

Try this :

$(document).ready( function(){
    var len = $('ul li').length;
    $('.prev').click(function(){
        if($('.active:first').index()!=0)
        {   
         $('.active').each(function(){            
            $(this).removeClass('active').prev('li').addClass('active');
        });
        }
    });

    $('.next').click(function(){
        if($('.active:last').index()!=(len - 1))
        {
          $('.active').each(function(){

          $(this).next('li').addClass('active');
        });
            $('.active:first').removeClass('active');    
        }
    });
});

DEMO

Answer 5

Yet another way

var ul = $('ul'),
    li = ul.find('li');

var $prev=$('.prev');
var $next=$('.next');

li.eq(1).addClass('active');
li.eq(2).addClass('active');

$next.on('click', function(){
    var lil = $("li.active:last").not(".last");
    lil.prev().toggleClass("active");
    lil.next().toggleClass("active");
});
$prev.on('click', function(){
    var lil = $("li.active:first").not(".first");
    lil.prev().toggleClass("active");
    lil.next().toggleClass("active");
});

http://jsfiddle.net/098p4fLa/