Recorrer elementos de la lista con jquery

Question

Estoy construyendo un micro sitio en este momento y tengo un problema. Quiero desplazarme a los diferentes elementos de la lista haciendo clic en mi menú. Esto está funcionando bien. Pero el problema es que, al usar el índice de la lista para atravesar el segundo o tercer elemento del menú principal, solo funciona bien en el primer menú porque el índice del segundo menú comienza con 3 al agregar al primero. Entonces .mainmenu.children es la llamada incorrecta, pero no sé cuál es la correcta.

Entonces, la pregunta es, ¿cómo puedo seleccionar un índice de lista solo por su menú principal? No quiero usar tres identificadores diferentes porque el menú debe ser dinámico.

espero que alguien pueda ayudarme.

saludos

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

¿Qué tal:

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