How to cycle through each li or div front and backwards using jquery

Question

I have a ul with around five <li> items. E.g.

<ul>
  <li>Step 1 : Take food</li>
  <li>Step 2 : Go Around</li>
  <li>Step 3 : Deliver</li>
</ul>

Also I have links like

<a href="# id="prev"> Previous</a> 

and

<a href="#" id="next"> Next</a>

I have to show the first li at first. Then when the next link is clicked, it should now show 2nd <li> and so on. Same for previous link. Please help.

Answer 1

have a look at the aptly named jQuery Cycle plugin.

http://www.malsup.com/jquery/cycle/scrollhv.html

Answer 2

If you are only showing one element, all you need to do is use the DOM tree as a search. If you want the next element, find the element that is currently being shown, hide it, and show its next sibling. If you are doing previous, then hide the current item and select the previous sibling.

If you are unsure of how to do this, just Google around for DOM navigation. It isn't too bad.

If at all possible, I would simply use some naming convention for your LI (in the id attribute) that you could very quickly select using jQuery. For instance, if your shown element is going to have a class that the rest won't have, you can select that element quickly using jQuery, grab its id, and modify it in some way to select the previous or next element.

Answer 3

as boerema said something along these lines (its untested!) put a class "selected" on a li that starts as being shown

<ul>
<li>Step 1 : Take food</li>
<li class="selected">Step 2 : Go Around</li>
<li>Step 3 : Deliver</li>
</ul>


$("#prev").click(function(){
   $(".selected").hide().removeClass("selected").prev().show().addClass("Selected");
});

$("#next").click(function(){
   $(".selected").hide().removeClass("selected").next().show().addClass("Selected");
});

Answer 4

here is a quick demo : http://jsbin.com/oduli4

  var width = 500;
  var height = 250;
  var slide = 0;
  var speed = 500;
  var size = 0;
$(document).ready(function() {

  size = $('#slider').find('li').length;

  $('#slider').find('ul').width(width * size).height(height);
  $('#slider li, #slider img').width(width).height(height);

  $('#next').bind('click',function() {
    if(slide > img_width * (size - 1) *(-1)) {
          slide -= width;
         slider(slide);
    }
  });
  $('#prev').bind('click',function() {
     if(slide < 0) {
      slide += width;
        slider(slide);
    }
  });
});


function slider(slideMargin) {
  $('#slider ul').stop().animate({'left':slideMargin}, speed );
}

Answer 5

following is the complete code:

$(document).ready(function()
{
    var ul = $('ul');

    // hide all li
    ul.find('li').hide();

    // make first li as current
    ul.find('li').first().addClass('current').show();

    // setup previous click handler
    $('a#prev').click(function()
    {
        var prev = ul.find('li.current').prev();

        if( prev.length )
        {
            ul.find('li.current').removeClass('current').hide();
            prev.addClass('current').show();
        }
    });

    // setup next click handler
    $('a#next').click(function()
    {
        var next = ul.find('li.current').next();

        if( next.length )
        {
            ul.find('li.current').removeClass('current').hide();
            next.addClass('current').show();
        }
    });

});