Traverser les éléments de la liste avec jquery

Question

Je construis un micro site en ce moment et j'ai un problème. Je veux faire défiler les différents éléments de la liste en cliquant sur mon menu. Cela fonctionne bien. Mais le problème est, en utilisant l'index de la liste à parcourir vers le deuxième ou le troisième élément du menu principal, son seul fonctionnement dans le premier menu parce que l'index du deuxième menu commence par 3 en ajoutant à la première. Donc .mainmenu.children est le mauvais appel, mais je ne connais pas le bon. Donc, la question est, comment puis-je sélectionner un index de liste par son menu parent seulement? Je ne veux pas utiliser trois ID différents car le menu doit être dynamique.

J'espère que quelqu'un peut m'aider.

meilleures salutations

h-man24

$('.mainmenu').children('li').click(function(){  
    var myIndex = $('.mainmenu li').index(this); 
    alert(myIndex + " " + myPosition); 
    var myPosition = $('#page > li').eq(myIndex).offset().top; 
    $('html, body').animate({scrollTop:myPosition, duration:500, easing:'easeInOutCirc'}); 
}); 

HTML:

<ul> 
<li> 
    <div> 
    <ul class="mainmenu"> 
    <li>Link to 1</li> (index 0) 
    <li>Link to 2</li> (index 1) 
    <li>Link to 3</li> (index 2) 
    </ul> 
    <div>Content 1></div> 
    </div> 
</li> 
<li> 
    <div> 
    <ul class="mainmenu"> 
    <li>Link to 1</li> (index 3, should be 0) 
    <li>Link to 2</li> (index 4, should be 1) 
    <li>Link to 3</li> .... 
    </ul> 
    <div>Content 2></div> 
    </div> 
</li> 
<li> 
    <div> 
    <ul class="mainmenu"> 
    <li>Link to 1</li> 
    <li>Link to 2</li> 
    <li>Link to 3</li> 
    </ul> 
    <div>Content 3></div> 
    </div> 
</li> 

Answer 1

Que diriez-vous:

$('.mainmenu li').click(function(){ 

    var myIndex = $(this).closest('.mainmenu').children('li').index(this); 
    alert(myIndex + " " + myPosition); 
    var myPosition = $('#page > li').eq(myIndex).offset().top; 
    $('html, body').animate({scrollTop:myPosition, duration:500, easing:'easeInOutCirc'});  
    });