JQuery ul li select list

Question

Cố gắng sử dụng JQuery để cuộn qua danh sách li li bằng cách sử dụng lớp kế tiếp và hạng ưu tiên, ví dụ:

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

Chỉ điều tôi chỉ muốn li được chọn hiển thị. Vì vậy, bằng cách nào đó cần phải lập chỉ mục của li? Giúp nhiều đánh giá cao - cảm ơn trước

Answer 1

này nên làm điều đó:

// 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; 
}); 

Answer 2

Nếu bạn muốn index của bạn, sử dụng như sau:

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

Mặc dù tôi sẽ xem xét câu trả lời Tatu Ulmanen của thay thế.

Answer 3

Hãy thử một cái gì đó như:

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

Với các đối tượng dữ liệu trong jQuery, bạn có thể kết hợp bất kỳ loại dữ liệu javascript với một yếu tố dom. Tôi đã sử dụng điều này để lưu trạng thái của danh sách.

Bạn có thể muốn thêm nhân viên bảo vệ cho mục đầu tiên và cuối cùng trong các bước tiếp theo/trước đó.