Как перебирать каждый li или div вперед и назад, используя jquery

Question

У меня есть ul с пятью <li> предметами.Например,

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

Также у меня есть ссылки типа

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

и

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

Сначала я должен показать первый li.Затем, когда нажата ссылка next, она должна показывать 2-й <li> и так далее.То же самое для предыдущей ссылки.Пожалуйста, помогите.

Answer 1

следующий полный код:

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

});

Answer 2

взгляните на точно названный плагин jQuery Cycle.

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

Answer 3

вот краткое демо: 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 4

как сказал Боерема что-то вроде этого (это не проверено!) поместите класс «selected» в li, который начинается так, как показано

<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 5

Если вы показываете только один элемент, все, что вам нужно сделать, это использовать дерево DOM в качестве поиска.Если вы хотите следующий элемент, найдите элемент, который отображается в данный момент, спрячьте его и покажите следующего брата.Если вы делаете предыдущий, то скройте текущий элемент и выберите предыдущего родного брата.

Если вы не знаете, как это сделать, просто используйте Google для навигации по DOM.Это не так уж плохо.

Если это вообще возможно, я бы просто использовал какое-то соглашение об именах для вашего LI (в атрибуте id), которое вы могли бы очень быстро выбрать с помощью jQuery.Например, если у вашего показанного элемента будет класс, которого нет у остальных, вы можете быстро выбрать этот элемент с помощью jQuery, захватить его идентификатор и каким-то образом изменить его, чтобы выбрать предыдущий или следующий элемент.