Следующий элемент по типу после текущего

Question

Следующий элемент по типу после текущего

Рейтинг: 0Ответов: 2Опубликовано: 26.01.2015

Как найти элемент по типу, в пределах формы, после текущего элемента?

Например:

<form>
    <input id="f"/>
    <input id="s"/>
    <div>
         <div>
              <input id="t"/>
         </div>
    </div>
    <input id="ff">
</form>

Как мне, находясь на элементе id=t, перешагнуть на следующий тип input, в нашем случае id=ff? ID заранее неизвестен.

jquery

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

http://jsbin.com/seyari/1/edit?html,js,console

function nextInput(inp) {
  var elems = inp.form.elements;
  return elems[[].indexOf.call(elems, inp)+1];
}

console.log(nextInput(f).id); // s
console.log(nextInput(t).id); // ff

P.S. Но скорей всего вам нужен http://htmlbook.ru/html/a/tabindex

Answer 2

▲ 0

var $forms = $('#t').closest('form').find('input');

Все инпуты в этой форме, выбирайте по индексу, типа $forms.eq(1)

А ещё лучше если ID неизвестен тогда задайте тим всем одинаквый класс, например "js-forms" и получите все формы так:

var $froms = $('.js-forms');

Если хотите "валидацию" то можно использовать дата атрибут, скажем так:

<input data-validate="email" />
<input data-validate="text" />
<input data-validate="text" />

И далее получаем массив только тех форм которые нужно "отвалидировать":

var $forms = $('[data-validate]');

$.each($forms.function(i,form){
    var $this = $(this);
    var $thisValue = $this.val();
    var thisType = $this.attr('data-validate');

    console.log([$thisValue,thisType ]);
});

Очень удобно в обработке, на событе "родительской формы" submit()

Если данные "костыли" нужны для перемещания по инпутам при помощи кнопки tab используйте атрибут tabindex как-то так:

<input tabindex="1" />
<input tabindex="2" />
<input tabindex="3" />
<input type="submit" tabindex="4" />

Следующий элемент по типу после текущего

Ответы