Cómo obtener el índice de un elemento primario en jQuery

Question

Tengo problemas para escribir una función jQuery y podría necesitar un poco de ayuda. Esto es lo que me gustaría lograr:

Tengo un elemento ul con 5 li para niños. En otra parte de la página, tengo un contenedor div con 5 div hijos. Cuando hago clic en un enlace en el tercer li, me gustaría ocultar los otros divs y mostrar solo el tercero.

Actualmente, cada vez que hago clic en un enlace en una de las li, devuelve el índice de la li dentro de todas las li de la página, no dentro de la ul que contiene.

Aquí está mi código:

$('.products #productNav li a:not(.active)').live('click', function() { 
    var index = $(this).parent().index('li'); 
    alert(index); 
    $('.products #copy div').fadeOut(200,function() { 
     $('.products #copy div').eq(index).fadeIn(200); 
    }); 
}); 

¿Alguna idea? Muchas gracias.
Marcus

Answer 1

Cambio .index('li') a .index() por lo que sólo se pone el número de índice de su posición con respecto a sus hermanos.

Aquí está un ejemplo simplificado:http://jsfiddle.net/cWWLM/

$('.products #productNav li a:not(.active)').live('click', function() { 

      // Get index of the parent <li> relative to its siblings 
    var index = $(this).parent().index(); 
    alert(index); 
    $('.products #copy div').fadeOut(200,function() { 
     $('.products #copy div').eq(index).fadeIn(200); 
    }); 
});