テーブルの次の入力フィールドにフォーカスを設定

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(); 
} 

これは最初のフィールドで機能しています。次の入力フィールドにフォーカスが当てられます。しかし、私は3番目の入力フィールドに集中することはできません。

私も

'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();