Why is .index() always returning 0
<p>I'm confused as to why .index() is returning 0 in this code.  Shouldn't it return the index of where it's found in the array of jquery objects?</p>

<pre><code>&lt;div id="nav"&gt;
       &lt;ul&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/ul&gt;
       &lt;ul&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/ul&gt;
       &lt;ul&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/ul&gt;
       &lt;ul&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/ul&gt;    
&lt;/div&gt;
&lt;div class="parent"&gt;
    &lt;div class="a"&gt;
        &lt;p&gt;this is a&lt;/p&gt;
    &lt;/div&gt;   
    &lt;div class="b"&gt;
        &lt;p&gt;this is b&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="c"&gt;
        &lt;p&gt;this is c&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="d"&gt;
        &lt;p&gt;this is d&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery code </p>

<pre><code> $('#nav a').click(function() {
    console.log($(this).index());
    var $div = $('.parent &gt; div').eq($(this).index());
    $div.show();
    $('.parent &gt; div').not($div).hide();
});​
</code></pre>

<p>I have to use <code>$(this).index('#nav a')</code> to get the correct index.</p>

<p><a href="http://jsfiddle.net/HpCWW/2/" rel="nofollow">http://jsfiddle.net/HpCWW/2/</a></p>
