計算哪個子元素是一個元素

Question

因此，我在頁面上有幾張幻燈片，每個幻燈片都有一個菜單項。 如果menuitem＃1被點擊，我想去幻燈片＃1等等。 到目前爲止沒有問題，但我不想爲每個項目進行硬編碼。

有沒有辦法計算哪個＃子元素被點擊？ （最好的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

這將使喲我們的代碼完全動態。

<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> 

Answer 3

既然你還標記了普通的舊javascript，我給你一個解決方案...

你可以利用previousElementSibling像這樣（fiddle）：

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