移到表内键​​上的下一个输入字段

Question

我在td的1行中有几行输入的表。我需要跳到任意数量的键盘上的下一个输入。我的代码在没有table标记的情况下工作，如果我添加table标记，则停止工作。这是链接和代码JSFIDDLE

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="border-box"><input class="border-box transition" type="text" name="d1" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d2" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d3" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d4" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d5" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d6" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d7" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
    </tr>
  </tbody>
</table>

Answer 1

.next('.transition')寻找同级，并且由于input不是同级，因此是td的唯一子级，顺便说一下，它们是同级，因此不会工作。

相反，您需要获取.parent()，然后使用next()获取下一个td，最后使用.find('.transition')查找input

$(this).parent().next().find('.transition').focus();

堆栈片段

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="border-box"><input class="border-box transition" type="text" name="d1" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d2" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d3" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d4" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d5" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d6" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d7" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
    </tr>
  </tbody>
</table>