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.

Answer 1

kudos,

What about using .index?

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