Question

我有一个ul，其中包含大约五个<li>个项目。 E.g。

<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链接时，它现在应显示第二个<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

如果您只显示一个元素，那么您需要做的就是使用DOM树作为搜索。如果你想要下一个元素，找到当前正在显示的元素，隐藏它，并显示它的下一个兄弟。如果您正在执行上一个操作，则隐藏当前项目并选择上一个兄弟。

如果您不确定如何执行此操作，只需使用Google进行DOM导航即可。这不是太糟糕。

如果可能的话，我会简单地为你的LI（在id属性中）使用一些你可以使用jQuery快速选择的命名约定。例如，如果您显示的元素将具有其余不具有的类，则可以使用jQuery快速选择该元素，获取其ID，并以某种方式修改它以选择上一个或下一个元素。

Answer 4

因为boerema在这些方面说了些什么（未经测试！）把一个“选定”的类放在一个以显示开始的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

这是一个快速演示： 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 );
}

如何使用jquery循环遍历每个li或div前后

5 个答案: