JQuery ul li sélectionner la liste

Question

Essayer d'utiliser JQuery pour faire défiler une liste ul ul en utilisant class next et class prev.

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

Seulement, je veux seulement que le li sélectionné soit visible. Donc en quelque sorte besoin d'indexer les li? Aide très appréciée - merci à l'avance

Answer 1

Cela devrait le faire:

// 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 vous voulez que votre index, utilisez ce qui suit:

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

Bien que je regardais la réponse de Tatu Ulmanen à la place.

Answer 3

Essayez quelque chose comme:

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

Avec l'objet de données dans jQuery, vous pouvez associer tout type de données javascript avec un élément dom. J'ai utilisé ceci pour sauvegarder l'état de la liste.

Vous pouvez ajouter des gardes pour le premier et le dernier élément des étapes suivantes/précédentes.