cycle through four list elements, applying an "active" class.

Posted by Derek Adair on Stack Overflow See other posts from Stack Overflow or by Derek Adair
Published on 2010-04-06T05:08:17Z Indexed on 2010/04/06 5:13 UTC
Read the original article Hit count: 310

Filed under:

Hi,

I would like to cycle through four li elements that all contain tags, setting the appropriate class to "active" and remove the "active" class. I'm having a bit of trouble figuring out how to achieve this via jQuery. HTML:

<ul class="liveMenu">
 <li id="leftScroll"></li>
 <li id="liveButton_1"><a class="buttons" href="#featured_1"></a></li>
 <li id="liveButton_2"><a class="buttons" href="#featured_2"></a></li>
 <li id="liveButton_3"><a class="buttons" href="#featured_3"></a></li>
 <li id="liveButton_4"><a class="buttons" href="#featured_4"></a></li>
 <li id="rightScroll"></li>
</ul>

jquery:

var index = 0;
$("#rightScroll").click(function(){

 if(index != 3){
  index++;
 } else {
  index = 0;
 }
    //this part is untested, it should work though
    $("a.active").removeClass("active");
 //this is where I am getting hung up
    //I need something like...

    $.each("li.buttons", function(i){
        if(i == index){
            $(this).addClass("active");
        }
    });

 });

$("#leftScroll").click(function(){
 if(index != 0){
  index--;
 } else {
  index = 3;
 }

    $.each("li.items", function(i){
        if(i == index){
            $(this).addClass("active");
        }
    });
 });

any help would be greatly appreciated. Thankyou.

© Stack Overflow or respective owner

Related posts about jQuery