jquery查找嵌套li的索引号

Question

我将如何获取嵌套 LI 之一的索引位置号？我可以获得顶部导航索引，但看不到子导航的子索引号。

我想动态创建选择器以根据顶部导航的索引定位子导航。

<div id="nav_container">
    <ul id="topnav">
        <li><a href="#a">menu item 0</a>
            <ul id="subnav0">
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
            </ul>
        </li>
        <li><a href="#a">menu item 1</a>
            <ul id="subnav1">
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
            </ul>
        </li>
        <li><a href="#">menu item 2</a></li>
        <li><a href="#">menu item 3</a></li>
     </ul>
</div>

我的 jQuery 代码

 //Event Handler
 function nav_execute(){
    var _index = $('#topnav > li').index(this);//Returns index number of topnav item selected
    var _subnav = '#subnav'+ _index.toString();
    var _selector = _subnav + ' > li'.toString();//the subnav selector
    var _subindex = $(_selector).index();//gets total num of index's
}

//Binded event
$('#topnav > li').bind('click', nav_execute);

Answer 1

需要注意的是，我真的不确定我是否理解您的目标，请尝试将您的 javascript 替换为：

$('#topnav  li').bind('click', function (){
  alert($(this).index());   
});

查看完整示例 这里
（这不是一个解决方案。它是一种查看哪些元素正在触发事件以及按什么顺序触发事件的方法）。

Answer 2

所以我认为你想说的是我想要获得“#topNav >”中包含的“subNav”ul。 li”被点击了？

如果这就是您想要做的，那么这应该可以

//Event Handler
 function nav_execute(){
    var $subNav = $(this).find("ul");

    //I'm not sure what you are trying to do here so im not going to change the functionality
    var subindex = $subNav.index();//gets total num of index's
}

//Binded event
$('#topnav > li').bind('click', nav_execute);

编辑：

根据您的评论，这里是您想要的jsfiddle：http://jsfiddle.net/wuFB7/4/

您可以直接为那些嵌套的 li 创建一个选择器。但是既然您说它们是动态生成的，我改变了“.bind”到“.live”，因为这将允许将事件处理程序附加到初始页面加载后创建的元素。

Answer 3

This code seems to have solved my problem. This checks the parent 'id' and then performs a simple conditional statement to determine which nav was clicked. It then stores the index(s) to their master vars.


 function nav_execute(e){

    var id = $(this).parent().attr("id").toString();

    if(id == "topnav"){
        _index = $(this).index();
        _subindex = null;
    }else{
        _index = $(this).parent().parent().index();
        _subindex = $(this).index();    
    }

    console.log('_index: ' + _index);
    console.log('_subindex: ' + _subindex);

    return false;   
}


$('#topnav > li').live('click', nav_execute);


Thanks for the help from everyone!