JQuery-скрипт с автофокусом, не нацеленный на следующее поле ввода

Question

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

$(".input_focus input").keyup(function () {
    if (this.value.length == this.maxLength) {
     $(this).next('.input_focus input').focus();
    }
}); 

Я предполагаю, что это может иметь какое-то отношение к селектору .next, который должен быть нацелен на следующего брата.Но, насколько я знаю, следующий .input_focus input - это родной брат предыдущего.

Это разметка для части формы, которую я использую:

<li id='field_8_8'  class='input_focus'>
    <label class='gfield_label' for='input_8_8' >My label<span class='gfield_required'>*</span></label>
    <div class='ginput_container ginput_container_text'>
        <input name='input_8' id='input_8_8' type='text' value='' class='small' maxlength='4'  tabindex='5' placeholder='1234' aria-required="true" aria-invalid="false" />
    </div>
</li>
<li id='field_8_10'  class='input_focus'>
    <label class='gfield_label' for='input_8_10' >My other label<span class='gfield_required'>*</span></label>
    <div class='ginput_container ginput_container_text'>
        <input name='input_10' id='input_8_10' type='text' value='' class='small' maxlength='2'  tabindex='6' placeholder='AB' aria-required="true" aria-invalid="false" />
</div>

Я ни в коем случае не эксперт по jQuery, поэтому я, вероятно, что-то упускаю.Любая помощь очень ценится.

Answer 1

Проблема заключается в том, что элементы input не являются элементами одного уровня, а селектор, который вы указываете для next(), который предназначен для фильтрации элементов одного уровня, фактически пытается нацелить дочерний элемент другого родительского элемента.

Чтобы это исправить, вам нужно немного изменить обход DOM.Вы можете использовать closest(), чтобы получить родителя li, затем использовать next(), чтобы получить своего родного брата li, затем, наконец, find(), чтобы нацелиться на input:

$(".input_focus input").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).closest('li.input_focus').next('li.input_focus').find('input').focus();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="field_8_8" class="input_focus">
    <label class="gfield_label" for="input_8_8">My label<span class="gfield_required">*</span></label>
    <div class="ginput_container ginput_container_text">
      <input name="input_8" id="input_8_8" type="text" value="" class="small" maxlength="4" tabindex="5" placeholder="1234" aria-required="true" aria-invalid="false" />
    </div>
  </li>
  <li id="field_8_10" class="input_focus">
    <label class="gfield_label" for="input_8_10">My other label<span class="gfield_required">*</span></label>
    <div class="ginput_container ginput_container_text">
      <input name="input_10" id="input_8_10" type="text" value="" class="small" maxlength="2" tabindex="6" placeholder="AB" aria-required="true" aria-invalid="false" />
    </div>
  </li>
</ul>