Jquery Выбрать следующий вложенный вложенный вход

Question

Попытка получить доступ к входу, который вложен в 3 пролета.

Вот мой код:

<div>
<span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar2"  />
        </span>
    </span>
</span>
<span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar2"  />
        </span>
    </span>
</span>
<span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar3"  />
        </span>
    </span>
</span>

Сценарий:

$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
  $(this).parent().next('.aadharInput .inner-row .aadhartxt').children('input').focus();
}

});

После ввода 4 цифр фокус должен перейти к следующему входу.

Answer 1

Я думаю, вы хотите вот так: -

$(document).ready(function(){
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
  $(this).parents('.aadharInput').next('.aadharInput').find('[type="text"]').focus();
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar2"  />
        </span>
    </span>
</span>
<span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar2"  />
        </span>
    </span>
</span>
<span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar3"  />
        </span>
    </span>
</span>

Answer 2

Вы не заходите достаточно далеко с parent() или недостаточно глубоко с children(), оба из которых проходят только один уровень

Попробуйте

$(this).closest('.aadharInput').next().find('input').focus();

Answer 3

Вы можете использовать $(this).closest('.aadharInput').next().find('.inputs').focus();:

1. $(this).closest('.aadharInput') найдет родительский элемент span с классом aadharInput, где на входе было четыре символа
2. .next('.aadharInput') будетзатем выберите следующий элемент в DOM, который будет следующим span элементом с классом aadharInput
3. find('.inputs'), найдет элемент input, имеющий класс inputs
4. .focus() наконец сфокусирует выбранный элемент ввода.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar2"  />
        </span>
  </span>
  </span>
  <span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar2"  />
        </span>
  </span>
  </span>
  <span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar3"  />
        </span>
  </span>
  </span>

Answer 4

Вы можете попробовать код ниже, где вы можете проверить длину введенного значения в keyup, а затем найти родителя aadharInput, а затем найти следующий aadharInput, чтобы получить следующий ввод

$(function(){
  $('input').on('keyup', function(){
      if($(this).val().length==$(this).attr("maxLength")) {
          var $span = $(this).closest('.aadharInput');
          $span.next('.aadharInput').find('input').focus();
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar2"  />
        </span>
    </span>
</span>
<span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar2"  />
        </span>
    </span>
</span>
<span class="aadharInput">
    <span class="inner-row">
        <span class="aadhartxt">
            <input class="inputs" type="text" maxlength="4" id="aadhaar3"  />
        </span>
    </span>
</span>
</div>