JQuery ul li सूची का चयन करें

Question

कक्षा के बाद कक्षा और कक्षा का उपयोग कर एक उल ली सूची के माध्यम से स्क्रॉल करने के लिए JQuery का उपयोग करने का प्रयास कर रहा है उदा।

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

केवल एक चीज है कि मैं केवल चयनित ली को दिखाना चाहता हूं। तो किसी भी तरह से ली के सूचकांक की आवश्यकता है? मदद की बहुत सराहना - अग्रिम

Answer 1

में धन्यवाद यह करना चाहिए:

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

हालांकि मैं Tatu Ulmanen के जवाब में बजाय दिखेगा:

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

आप अपनी अनुक्रमणिका चाहते हैं, निम्नलिखित का उपयोग करें।

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

, आप एक डोम तत्व के साथ जावास्क्रिप्ट डेटा के किसी भी प्रकार जोड़ सकते हैं। मैंने सूची की स्थिति को बचाने के लिए इसका इस्तेमाल किया है।

आप अगले/पिछले चरणों में पहले और अंतिम आइटम के लिए गार्ड जोड़ना चाहेंगे।