Best way to find "next" form input element in jQuery?
<p>Using jQuery, what's the best way to find the next form element on the page, starting from an arbitrary element?  When I say form element I mean <code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, <code>&lt;button&gt;</code> or <code>&lt;textarea&gt;</code>.</p>

<p>In the following examples, the element with the id "this" is the arbitrary starting point, and the element with the id "next" is the one I want to find.  The same answer should work for all examples.</p>

<p>Example 1:</p>

<pre><code>&lt;ul&gt;
 &lt;li&gt;&lt;input type="text" /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input id="this" type="text" /&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ul&gt;
 &lt;li&gt;&lt;input id="next" type="text" /&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;button&gt;&lt;/button&gt;
</code></pre>

<p>Example 2:</p>

<pre><code>&lt;ul&gt;
 &lt;li&gt;&lt;input id="this" type="text" /&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;button id="next"&gt;&lt;/button&gt;
</code></pre>

<p>Example 3:</p>

<pre><code>&lt;input id="this" type="text" /&gt;
&lt;input id="next" type="text" /&gt;
</code></pre>

<p>Example 4:</p>

<pre><code>&lt;div&gt;
  &lt;input id="this" type="text" /&gt;
  &lt;input type="hidden" /&gt;
  &lt;div&gt;
    &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input id="next" type="text" /&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;button&gt;&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>EDIT: The two answers provided so far both require writing a sequence number to all input elements on the page.  As I mentioned in the comments of one of them, this is kind of what I'm already doing and I would much prefer have a read-only solution since this will be happening inside a plugin.</p>
