jquery index() - elemento de la lista emergente, mostrar contenido con el mismo índice

Question

Tengo un problema de jquery con un pequeño menú que tengo. Tengo una lista de elementos del menú. Cuando desplace el cursor sobre uno de los elementos de la lista, me gustaría mostrar el contenido de una lista de divisiones que comparte el mismo índice que el elemento de la lista. Esto debe ser dinámico, permita cualquier cantidad de elementos de menú y elementos de contenido.

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

lo que probablemente utilice el método hover() para simplificar esta (o el hoverIntent plugin, que soluciona algunos otros problemas, como problemas con el movimiento rápido del ratón) .

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

Esto debería hacer el truco:

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

uso prevAll().length. Mucho mejor que .index