jqueryulli选择列表

尝试使用JQuery使用class next和class prev在ul li列表中滚动，例如

<ul class="selectoption">
    <li> Item 1</li>
    <li> Item 2</li>
    <li> Item 3</li>
    <li> ...   </li>
</ul>
<a href="" class="next">Next</a>
<a href="" class="prev">Back</a>

项目1
项目2
项目3

唯一的问题是，我只希望选定的li可见。所以，不知何故需要索引李的？非常感谢您的帮助-提前感谢

这应该可以做到：

// Hide all but the first
$('.selectoption li').not(':first').hide();

// Handle the click of prev and next links
$('.prev, .next').click(function() {
    // Determine the direction, -1 is prev, 1 is next
    var dir = $(this).hasClass('prev') ? -1 : 1;
    // Get the li that is currently visible
    var current = $('.selectoption li:visible');

    // Get the element that should be shown next according to direction
    var new_el = dir < 0 ? current.prev('li') : current.next('li');

    // If we've reached the end, select first/last depending on direction
    if(new_el.size() == 0) {
        new_el = $('.selectoption li:'+(dir < 0 ? 'last' : 'first'));
    }

    // Hide them all..
    $('.selectoption li').hide();
    // And show the new one
    new_el.show();

    // Prevent the link from actually redirecting the browser somewhere
    return false;
});

//隐藏除第一个以外的所有内容
$（'.selectoption li'）。而不是（':first'）.hide（）；
//处理上一个和下一个链接的点击
$（'.prev，.next'）。单击（函数（）{
//确定方向，-1为上一个，1为下一个
var dir=$（this）.hasClass（'prev'）？-1:1；
//获取当前可见的li
当前变量=$（'.selectoption li:visible'）；
//根据方向获取下一步应显示的元素
var new_el=dir<0？current.prev（'li'）：current.next（'li'）；
//如果已到达终点，请根据方向选择“第一个/最后一个”
如果（新尺寸（）==0）{
new_el=$（'.selectoption li:'+（dir<0？'last'：'first'）；
}
//把它们都藏起来。。
$（'.selectoption li'）.hide（）；
//展示新的
新秀；
//阻止链接实际将浏览器重定向到某个位置
返回false；
});

如果需要索引，请使用以下内容：

$("#selectoption>li").click(function(){
    alert($(this).index());
});

尽管我会看塔图·乌尔曼的答案。

试试以下方法：

$(function(){
    // initialization
    $(".selectoption").data("index",1).find("li:not(:first)").hide();

    // previous
    $(".previous").click(function(){
      $(".selectoption").data(
           "index", 
           $(".selectoption").data("index") - 1
      );
      $(".selectoption li").hide().eq($(".selectoption").data("index")).show();
      return false;
    });

    // next
    $(".next").click(function(){
      $(".selectoption").data(
           "index", 
           $(".selectoption").data("index") + 1
      );
      $(".selectoption li").hide().eq($(".selectoption").data("index")).show();
      return false;
    })    
});

通过jQuery中的数据对象，可以将任何类型的javascript数据与dom元素相关联。我用它来保存列表的状态

---

您可能希望在下一步/上一步中为第一项和最后一项添加防护。

Hi Tatu Ulmanen，感谢您的帮助，只需稍加修改即可-如果（next.size（）==0）{next=dir==prev'？$（'.selectoption li:first'）：$（'.selectoption li:first'）；}-停止prev按钮创建nil项。@russell，它应该可以工作，但是如果没有，您的修改可以简化为

如果（next.size（）==0）{next=$（'.selectoption li:first'）；}

，则不需要内部条件。但是如果它对你有用的话，那就好了，别忘了在接受的答案上加上记号：）