javascript - Best way to find "next" form input element in jQuery?

Question

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 <input>, <select>, <button> or <textarea>.

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.

Example 1:

<ul>
 <li><input type="text" /></li>
 <li><input id="this" type="text" /></li>
</ul>

<ul>
 <li><input id="next" type="text" /></li>
</ul>

<button></button>

Example 2:

<ul>
 <li><input id="this" type="text" /></li>
</ul>

<button id="next"></button>

Example 3:

<input id="this" type="text" />
<input id="next" type="text" />

Example 4:

<div>
  <input id="this" type="text" />
  <input type="hidden" />
  <div>
    <table>
      <tr><td></td><td><input id="next" type="text" /></td></tr>
    </table>
  </div>
  <button></button>
</div>

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.

question from:https://stackoverflow.com/questions/290535/best-way-to-find-next-form-input-element-in-jquery

Answer 1

kudos,

What about using .index?

e.g $(':input:eq(' + ($(':input').index(this) + 1) + ')');