Why am I getting -1 for my row index?
<p>I have the following table...</p>

<pre><code>&lt;table id="foo"&gt;
  &lt;tr&gt;&lt;td&gt;&lt;!-- label --&gt;&lt;!-- select --&gt;&lt;/td&gt;&lt;tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;!-- label --&gt;&lt;input type="text" /&gt;&lt;/td&gt;&lt;tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;!-- label  --&gt;&lt;!-- select --&gt;&lt;/td&gt;&lt;tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;!-- label --&gt;&lt;!-- radio buttons --&gt;&lt;/td&gt;&lt;tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;!--hidden validation image--&gt;&lt;/td&gt;&lt;tr&gt;
&lt;/table&gt;
</code></pre>

<p>Now when the page renders I hide all but the first row of my table using jQuery's .each. Now I wish to expand my script so that when a user causes a blur event on the textbox I retrieve that row's index and then show the next row, I'm using the following code for this:</p>

<pre><code>$("#foo input[type=text]").blur(function() {
    alert($(this).closest("tr").index());
});
</code></pre>

<p>However the value alerted seems to be -1? So there's a problem there as it's not finding the row. Can someone tell me why I'm being so dumb?</p>

<p>Please note that I have no control of the table as this is determined by the back of the system (which I'm not allowed to touch!)</p>
