jquery查找嵌套li的索引號

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

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! 

Answer 2

有了，我真的不知道我理解你的目標的警告，嘗試更換您的javascript：

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

查看完整的例子here （這不是一個解決方案，它是查看哪些元素正在觸發事件以及按照哪個順序的方式）。

Answer 3

所以我認爲你是想說我想要得到的「subNav被點擊#topNav>裏‘」在任何UL載’？

如果這是你正在嘗試做的，然後這應該工作

//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」，因爲這會允許將事件處理程序附加到初始頁面加載後創建的元素。