jQuery： $(this).next().focus();如果<input>标签后跟 <td> OR <br> 标签，则不起作用

Question

我正在使用jQuery来限制输入<input>字段中的位数，然后跳转到下一个字段。以下是代码：

.HTML：

<input class=time ...><input class=time...><input class=time ...>

.JS：

$('.time').on('keyup', function(event) {
  var data = $(this).val();
  data = data.replace(/D/g,''); // Delete all non-digits
  len = data.length;    
  if (len==3) {
    data = data.slice(0,2) + ':' + data[2];  // Add a ':'
  } else if (len>=4) {
    data = data.slice(0,2) + ':' + data.slice(2,4);
    $(this).next('.time').focus();  
  }
  $(this).val(data);
});

以上将起作用。但是如果我将输入字段添加到表中，则$(this).next('.time').focus();语句将不起作用：

<table>
<tr>
  <td><input class=time ...></td>
  <td><input class=time ...></td>
  <td><input class=time ...></td>
</tr>
</table>

我还发现，如果<input>标签后面跟着<br>，focus()语句也会失败：

<input class=time ...><br>
<input class=time ...><br>
<input class=time ...><br>

我该如何解决？

Answer 1

这是因为输入不再具有同级关系，它们的父 TD 具有。您需要遍历到父 td，然后在下一个 td 元素中找到输入：

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