Come ottenere l'indice di un elemento genitore in jQuery

Question

Ho problemi a scrivere una funzione jQuery e potrei usare un piccolo aiuto. Ecco cosa mi piacerebbe realizzare:

Ho un elemento ul con 5 bambini li. Altrove nella pagina, ho un contenitore div con 5 div bambini. Quando clicco su un link nel terzo li, vorrei nascondere gli altri div e mostrare solo il terzo.

Attualmente ogni volta che faccio clic su un collegamento in uno dei li, restituisce l'indice del li all'interno di tutti i li sulla pagina, non all'interno del contenitore ul.

Ecco il mio codice:

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

Tutte le idee? Grazie mille.
Marcus

Answer 1

Change .index('li') per .index() quindi diventa solo il numero indice della sua posizione rispetto ai suoi fratelli.

Ecco un esempio semplificato: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); 
    }); 
});