使用jquery遍历列表元素

Question

我目前正在构建一个微型网站，但遇到了问题。我想通过单击菜单滚动到不同的列表元素。这工作正常。但问题是，通过使用列表索引遍历到主菜单的第二个或第三个元素，它只能在第一个菜单中正常工作，因为第二个菜单的索引通过添加到第一个菜单而从 3 开始。所以 .mainmenu.children 是错误的调用，但我不知道正确的调用。

那么问题是，如何仅通过其父菜单来选择列表索引？我不想使用三个不同的 ID，因为菜单应该是动态的。

希望有人可以帮助我。

最好的问候

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

怎么样：

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