將焦點設置到表中的下一個輸入字段

Question

我想通過按enter將下一個輸入集中在表格字段中。 該表如下所示：

<table>
    <tbody>
        <tr>
            <td>Title 1</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
        <tr>
            <td>Title 2</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
        <tr class="group">
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>Title 3</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
        <tr class="group">
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>Title 4</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
    </tbody>
</table>

這是我的JS，專注於下一個輸入字段。

'change input[type="number"]': (event) => {
    $(event.target).closest('tr').next(':not(.group)').find('input').focus();
}

這是第一個領域的工作。 下一個輸入字段將成為焦點。 但是我不能集中注意第三個輸入字段。

我也試過

'change input[type="number"]': (event) => {
    $(event.target).closest('tr').siblings(':not(.group)').find('input').focus();
}

但是然后將焦點設置到最后一個輸入字段，我不明白為什么。

Answer 1

問題在於jQuery的next()僅查看下一個同級，而不是所有隨后的同級。 您想要的是nextAll() ：

$(event.target)
    .closest('tr')
    .nextAll('tr:not(.group)')
    .first()
    .find('input')
    .focus();