JQuery ul li 목록 선택

Question

JQuery를 사용하여 클래스 next와 클래스 prev를 사용하여 ul li 목록을 스크롤하려고합니다.

내가 선택한 li 만 보일뿐입니다. 어떻게 든 리의 색인을 생성해야합니까? 많이 감사 도움말 - 미리 감사

Answer 1

에서이 그것을 수행해야합니다

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

을 당신이 당신의 인덱스를 원하는 경우, 다음을 사용 :

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

을 내가 대신 타투 Ulmanen의 대답에 보일 것이다 있지만.

Answer 3

같은 시도 : jQuery를에있는 데이터 객체와

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

을, 당신은 DOM 요소와 자바 스크립트 모든 종류의 데이터를 연결할 수 있습니다. 나는 이것을 사용하여 목록의 상태를 저장했다.

다음/이전 단계의 첫 번째 항목과 마지막 항목에 대해 보호를 추가 할 수 있습니다.