jquery अनुक्रमणिका() - होवर सूची आइटम, उसी इंडेक्स के साथ सामग्री दिखाएं

Question

मेरे पास एक छोटे से मेनू के साथ एक jquery समस्या है। मेरे पास मेनू आइटम की एक सूची है। जब मैं सूची सूची में से किसी एक पर होवर करता हूं, तो मैं सामग्री को divs की सूची से दिखाना चाहता हूं जो सूची आइटम के समान सूचकांक साझा करता है। इसे गतिशील होने की आवश्यकता है किसी भी मेनू आइटम और सामग्री आइटम की अनुमति दें।

$(document).ready(function() { 
    $("#leftnav li").each(function(){ 
     $(this).mouseover(function() { 
      //SHOW div that shares same index as this li 
     }); 
     $(this).mouseout(function() { 
      //HIDE div that shares same index as this li 
     }); 
    }); 
}); 

<ul id="leftnav"> 
    <li>Link 1</li> 
    <li>Link 2</li> 
</ul> 

<div id="content"> 
    <div>Content 1</div> 
    <div>Content 2</div> 
</div> 

Answer 1

मैं शायद यह आसान बनाने के लिए hover() विधि का उपयोग करें चाहते हैं (या hoverIntent प्लगइन है, जो तेजी से माउस आंदोलन के साथ मुद्दों जैसे कुछ अन्य समस्याओं को हल करती है) ।

$(function() { 
    $('#leftnav li').hover(
      function() { 
       var idx = $('#leftnav li').index(this); 
       $('#content div').eq(idx).show(); 
      }, 
      function() { 
       var idx = $('#leftnav li').index(this); 
       $('#content div').eq(idx).hide(); 
      } 
     }): 
}); 

Answer 2

इस चाल करना चाहिए:

$(function() { 
     $('#leftnav li').mouseover(function() { 
      var index = $('#leftnav li').index($(this)); 
      $('#content').find('div:eq(' + index + ')').show(); 
     }).mouseout(function() { 
      var index = $('#leftnav li').index($(this)); 
      $('#content').find('div:eq(' + index + ')').hide(); 
     }); 
    }); 

Answer 3

prevAll().length का उपयोग करें। .index