Question

所以我在页面上有几张幻灯片，每张幻灯片都有一个菜单项。如果单击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;
});

demonstration

Answer 2

既然你也标记了普通的javascript，我会给你一个解决方案......

您可以像previousElementSibling）那样使用fiddle：

function getElementIndex(elem) {
    var i = 0;
    while (elem = elem.previousElementSibling) i++;
    return i;
}

Answer 3

这将使您的代码完全动态化。

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


     <script>
        $(document).ready(function(){
        var navs = $('.nav');
        $.each(navs,function(index,value){
            $(navs[i]).attr('data-index',i);
            }
        $('.nav').click(function(){
            var nav_index = $(this).attr('data-index');
            //Do something with nav_index here
         });
});
</script>

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

3 个答案: