Выбор следующего() ввода

У меня есть следующий html:

<div>
    <input type="text" maxlength="2" class="day-spin-month"></input>
    <span>/</span>
    <input type="text" maxlength="2" class="day-spin-day"></input>
    <span>/</span>
    <input type="text" maxlength="4" class="day-spin-year"></input>
</div>

Я пытаюсь изменить фокус на следующий ввод. У меня есть два следующих способа.

$('.day-spin-month').on('keyup', function () {
    if (this.value.length >= 2) {
       $(this).next().next().focus();
    }
});
$('.day-spin-day').on('keyup', function () {
    if (this.value.length >= 2) {
       $(this).next().next().focus();
    }
});

скрипт: http://jsfiddle.net/dan_vitch/JbQaN/1/

$('.day-spin-month').on('keyup', function () {
    if (this.value.length >= 2) {
       var test=$(this).next()
       var test2=  $(test).next('input');
       test2.focus();
     }
});
$('.day-spin-day').on('keyup', function () {
    if (this.value.length >= 2) {
        var test=$(this).next()
        var test2=  $(test).next('input');
        test2.focus();
    }
});

скрипт: http://jsfiddle.net/dan_vitch/JbQaN/2/

но он не работает таким образом:

$('.day-spin-month').on('keyup', function () {
    if (this.value.length >= 2) {
       $(this).next('input').focus();
    }
});
$('.day-spin-day').on('keyup', function () {
    if (this.value.length >= 2) {
       $(this).next('input').focus();
    }
});

скрипт: http://jsfiddle.net/dan_vitch/rJwyE/2/

Я хотел бы использовать способ, который не работает. Я не уверен, что его мой селектор неверен, или то, как я понимаю следующее()

Ответы

Ответ 1

.next() рассматривает только следующий элемент Sibling в DOM. IE.

$('.day-spin-month').next('input');

Не будет соответствовать ничего, поскольку следующий брат - это диапазон, а не вход.

nextAll() смотрит на всех следующих братьев и сестер, поэтому вы хотите:

$(this).nextAll('input').first().focus();