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

对于parent()，您走得不够远，对children()而言，走得太远

尝试

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

Answer 2

您可以尝试下面的代码，在该代码中可以检查键盘输入值的长度，然后找到父级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 3

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

$(this).closest('.aadharInput')将找到类span的父项aadharInput，其中输入有四个字符
.next('.aadharInput')然后将选择DOM中的下一个元素，该元素将是类别为span的下一个aadharInput元素
find('.inputs')将找到具有类input的{{1}}元素
inputs将最终聚焦所选的输入元素。

.focus()

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

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选择下一个嵌套嵌套嵌套输入

4 个答案: