计算哪个子元素是一个元素

Question

所以我在页面上有几张幻灯片,每张幻灯片都有一个menuitem.如果单击menuitem#1,我想转到幻灯片#1,依此类推.到目前为止没问题,但我不想为每个项目进行硬编码.

有没有办法计算哪个#child元素被点击了？(最好是jQuery)

<nav id="mainNav">
    <ul>
        <li>
            <a href="#">Hello</a>
        </li>
        <li>
            <a href="#">World</a>
        </li>
        <li>
            <a href="#">Blaa</a>
        </li>
    </ul>
</nav>

Answer 1

由于您使用的是jQuery,因此您可以使用以下index方法:

$('#mainNav a').click(function() {
    alert($(this).parent().index());
    return false;
});

或者,如果<a>可以任意嵌套,您可以使用以下内容:

$('#mainNav a').click(function() {
    alert($(this).closest('#mainNav > ul > li').index());
    return false;
});

示范