Вычисление того, какой ребенок # элемент

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