JQuery ul li wybierz listę

Question

Próba użycia JQuery do przewijania listy ulii przy użyciu klasy next i class prev np.

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

Jedyna rzecz, chcę, aby wybrane li były widoczne. Więc jakoś musieć indeksować li? Pomoc mile widziane - z góry dzięki

Answer 1

To powinno wystarczyć:

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

Jeśli chcesz indeksu, należy użyć następujących:

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

Chociaż chciałbym spojrzeć na odpowiedź Tatu Ulmanen zamiast.

Answer 3

Spróbuj czegoś takiego:

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

z obiektem danych w jQuery, można skojarzyć wszelkiego rodzaju danych z javascript elementu DOM. Użyłem tego, aby zapisać stan listy.

Możesz chcieć dodać osłony dla pierwszego i ostatniego elementu w następnych/poprzednich krokach.