title: How do I get the index of the current item in relation to the parent element with jQuery?
body: <p>I am trying to get the index of the current item within </p>
  
  <pre><code>&lt;ul id="navbar"&gt;
      &lt;li&gt;&lt;a href="#a"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#b"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#c"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#d"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#e"&gt;Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am using jQuery and have got the total by simply using</p>
  
  <pre><code>$('ul#navbar').children().length;
  </code></pre>
  
  <p>How do I get the current index in relation to the parent element?</p>
  
  <p>eg. Third link is clicked, 3 is returned or 2 if as an array.</p>
  
  <p>I've tried the following but keep returning -1 for not found</p>
  
  <pre><code>$('ul#navbar a').click(function(){
      var curPos = $(this).parent().parent().index($(this).parent());
  });
  </code></pre>
  
  <p>EDIT: Changed the ul.navbar in the javascript to ul#navbar, apologies</p>