Question

我如何获得其中一个嵌套LI的索引位置编号？我可以获得topnav索引，但看起来似乎不是subnav（s）的子索引号。

我想根据topnav的索引动态创建选择器以定位subnav。

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

查看完整示例here （这不是解决方案。这是一种查看哪些元素触发事件以及按哪种顺序发生的方法。）

Answer 2

所以我认为你试图说我想把“subNav”包含在“＃topNav＆gt;中。 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);

修改

根据你的评论，这是你想要的一个方面：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!

jquery查找嵌套li的索引号

3 个答案: