Лучший способ найти «следующий» элемент ввода формы в jQuery?

Question

С помощью jQuery, как лучше всего найти следующий элемент формы на странице, начиная с произвольного элемента? Когда я говорю элемент формы, я имею в виду <input>, <select>, <button> или <textarea>.

В следующих примерах элемент с идентификатором «this» является произвольной отправной точкой, а элемент с идентификатором «next» - тем, который я хочу найти. Один и тот же ответ должен работать для всех примеров.

Пример 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>

Пример 2:

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

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

Пример 3:

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

Пример 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>

РЕДАКТИРОВАТЬ: два ответа, представленные до сих пор, оба требуют записи порядкового номера для всех элементов ввода на странице. Как я упоминал в комментариях к одному из них, это то, что я уже делаю, и я бы предпочел иметь решение только для чтения, поскольку это будет происходить внутри плагина.

Answer 1

var elementSelector = "input:visible,textarea:visible";
var nextSibling = $(elementSelector )[$(elementSelector ).index() + 1];
//$(nextSibling).focus(); possible action

Я просто думаю, что решение выше проще, или вы можете просто добавить все это в одну строку, если хотите: -)

var nextSibling = $("input:visible,textarea:visible")[$("input:visible,textarea:visible").index() + 1];

Answer 2

Вы можете использовать полевой плагин jQuery, который позволяет вам сделать это.