Lista de selección de JQuery ul li

Question

Intentando usar JQuery para desplazarse por una lista ulli utilizando la clase next y class prev, p.

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

Lo único es que solo quiero que el li seleccionado sea visible. ¿De alguna manera necesitas indexar los li's? Ayuda muy apreciada - gracias de antemano

Answer 1

Esto debe hacerlo:

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

Si desea que su índice, utilice la siguiente:

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

Aunque me gustaría ver la respuesta de Tatu Ulmanen lugar.

Answer 3

Pruebe algo como:

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

Con el objeto de datos en jQuery, puede asociar cualquier tipo de datos javascript con un elemento DOM. Lo he usado para guardar el estado de la lista.

Es posible que desee agregar protecciones para el primer y último elemento en los pasos siguiente/anterior.