jQuery .index() strangeness
<p>I'm by no means a jQuery (or JavaScript) expert so forgive me if I'm misunderstanding or overlooking something. I have the following HTML:</p>

<pre><code>&lt;html&gt;
    &lt;body&gt;
        &lt;div class="ted"&gt;Ted&lt;/div&gt;
        &lt;div class="ted"&gt;Ted&lt;/div&gt;
        &lt;div class="tim"&gt;Tim&lt;/div&gt;
        &lt;div class="ted"&gt;Ted&lt;/div&gt;
        &lt;div class="tim"&gt;Tim&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>And the following JS:</p>

<pre><code>$('.ted').click(function() {
    alert($(this).index());
});
</code></pre>

<p>When I click a div with the class <code>'.ted'</code> the alert should show the index of that <code>div</code>.</p>

<p>Clicking the first div alerts '0' (expected), the second div alerts '1' (expected). However, clicking the last <code>'.ted'</code> <code>div</code> (the fourth in the list) alerts '3' - why is this not giving an index of 2? (as JS arrays are 0 based) and this is the <strong>third</strong> <code>'.ted'</code> <code>div</code>?</p>

<p>It's as if <code>$('.ted')</code> is actually bringing back all the divs in the list?</p>

<p>Example here: <a href="http://jsfiddle.net/nha2f/6/" rel="nofollow">http://jsfiddle.net/nha2f/6/</a></p>
