Jquery Select next nested nested 嵌套输入

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

您可以尝试下面的代码，您可以在其中检查 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>

Answer 2

您在 parent() 上走得不够远，在 children() 上走得不够深，两者都只遍历一层

尝试

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

Answer 3

您可以使用 $(this).closest('.aadharInput').next().find('.inputs').focus();:

$(this).closest('.aadharInput') 将找到具有 class aadharInput 的父级 span，其中输入有四个字符
.next('.aadharInput') 将 select DOM 中的下一个元素，这将是 class aadharInput[ 的下一个 span 元素=36=]
find('.inputs') 将找到具有 class inputs

input

.focus() 将最终聚焦 selected 输入元素。

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

我想你想要这样：-

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

Jquery Select next nested nested 嵌套输入

Jquery Select next nested nested nested input

javascript

jquery

jquery-plugins