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

Попытка получить доступ к <div> <span class = "aadharInput" > <span class = "inner-row" > <span class = "aadhartxt" > <input class = "input" type = "text" maxlength = "4" id = "aadhaar2" /> </ span> </ span> </ span> <span class = "aadharInput" > <span class = "inner-row" > <span class = «aadhartxt» > <input class = "input" type = "text" maxlength = "4" id = "aadhaar2" /> </ span> </ span> </ span> <span class = "aadharInput" > <span class = "inner-row" > <span class = "aadhartxt" > <input class = "input" type = "text" maxlength = "4" id = "aadhaar3" /> </ span> </ span> </ span>, который вложен в 3 $ ( ".inputs" ). keyup ( function () { if ( this . value . length == this . maxLength ) { $ ( this ). parent (). next ( '.aadharInput .inner-row .aadhartxt' ). children ( 'input' ). focus (); } s.

Вот мой код:

parent()

Автор сценария:

children()

});

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

javascript,jquery,jquery-plugins,

0

Ответов: 4

уйте < $ ( это ). ближайший ( '.aadharInput' ). next (). find ( 'input' ). focus (); itemprop = "upvoteCount" class = "vote-count-post mobile-vote-count"> 1 принят

Вы недостаточно далеко продвигаетесь $(this).closest('.aadharInput').next().find('.inputs').focus();или находитесь достаточно глубоко, причем $(this).closest('.aadharInput')оба они пересекают только один уровень

Пытаться

span
0

Вы можете использовать aadharInput:

  1. .next('.aadharInput')найдет родителя spanс классом, spanгде вход имеет четыре символа
  2. aadharInputзатем выберет следующий элемент в DOM, который будет следующим spanэлементом с классомfind('.inputs')
  3. inputнайдет 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>

0

Вы можете попробовать под кодом, где вы можете проверить длину входного значения на клавиатуре, а затем найти родителя, 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>

0

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

$(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>

JavaScript, JQuery, JQuery-плагинов,
Похожие вопросы
Яндекс.Метрика