移到下一个输入字段中的keyup内表

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>

​