入力条件の後の次のタブインデックスへのタブ

Question

条件が満たされた後、次のタブインデックスに自動的に移動しようとしています。どのように私は次の要素のidタグを使用せずに、tabindexにアクセスすることができますか？

HTML：

<tr> 

<td id = "t3"> <input type="text" id = "ate" oninput="ate()" tabindex= "1" class = "tabable"/> </td> 

<td id = "t3"> <input type="text" id = "eaten" oninput ="eaten()" tabindex= "2" class = "tabable" /> </td> 
</tr> 

JS

function ate(){ 
var value = document.getElementById("ate").value; 
var get_tab = document.getElementById("ate").getAttribute('tabindex'); 
var next_tab = get_tab + 1 ; 

if (value == "ate") { 

     $('#ate').fadeTo(1000, 0); 
     $('#ate').prop('tabIndex', -1); 
     //document.getAttribute('tabindex'); ??  
} 

Answer 1

ヨは、このセレクタで要素を選択することができます。

$('input[tabindex="2"]') 

Answer 2

次inputはクラス名を使用して検索および.focus()を追加します。ここで

は実際の例です：

function ate() { 
 
    var value = document.getElementById("ate").value; 
 
    var get_tab = document.getElementById("ate").getAttribute('tabindex'); 
 
    var next_tab = get_tab + 1; 
 

 
    if (value == "ate") { 
 
    $('#ate').fadeTo(1000, 0); 
 
    $('#ate').prop('tabIndex', -1); 
 
    //document.getAttribute('tabindex'); ?? 
 

 
    $('#ate').next('.tabable').focus(); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<tr> 
 
    <td id="t3"> 
 
    <input type="text" id="ate" oninput="ate()" tabindex="1" class="tabable" /> 
 
    </td> 
 

 
    <td id="t3"> 
 
    <input type="text" id="eaten" oninput="eaten()" tabindex="2" class="tabable" /> 
 
    </td> 
 
</tr>