jQueryは次の入力フィールドにジャンプします

Question

私はユーザーが入力に1文字を入力し、入力フィールドにJUMPを入力できるようにしようとしています。

これは、このように動作します：https://jsfiddle.net/ej9tvosj/1/

しかし、私はdiv要素内の入力を入れると、機能が働いて停止します。

https://jsfiddle.net/ej9tvosj/2/

動作しません。私のコードは動作しますが、HTMLの一部が異なっているものと同じです。

$(document).on('input', '.inps', function(event) { 
 

 
    $(this).attr('type', 'tell'); 
 

 
    function showpanel() { 
 
    $('.inps').attr('type', 'password'); 
 
    $(this).attr('type', 'tell'); 
 
    } 
 

 
    // use setTimeout() to execute 
 
    setTimeout(showpanel, 1000); 
 

 
    // check for hyphen 
 
    var myLength = $(this).val().trim().length; 
 
    if (myLength == 1) { 
 
    $(this).next('.inps').focus(); 
 
    $(this).next('.inps').val(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="inps">enter number</label> 
 
    <br> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 

 
</div>

誰かがこの問題について助言してもらえますか？

Answer 1

あなたは次のinput選択しclosestとfindを使用することができます次inputに移動場所を変更することができます - デモ下記参照：

$(document).on('input', '.inps', function (event) { 
 

 
$(this).attr('type', 'tell'); 
 

 
function showpanel() { 
 
$('.inps').attr('type', 'password'); 
 
$(this).attr('type', 'tell'); 
 
} 
 

 
// use setTimeout() to execute 
 
setTimeout(showpanel, 1000); 
 
    
 
    // check for hyphen 
 
\t var myLength = $(this).val().trim().length; 
 
    if(myLength ==1){ 
 
    $(this).closest('.split4').next('.split4').find('.inps').focus().val(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="inps">enter number</label> 
 
    <br> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div><div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    
 
</div>

Answer 2

あなたは、それはそれが理由はjQueryのnext機能の利用である子入力

$(this).parent().next('div.split4').find('input').focus(); 

DEMO

Answer 3

だ見つけ、その後div &兄弟のFind現在の入力&の親を選択する必要があります。 ここでは公式のドキュメント：

説明： にマッチした要素の集合を、各要素の直後の兄弟を取得します。セレクタが提供されている場合、そのセレクタに一致する場合にのみ、次の兄弟を で取得します。その後

あなたはdiv要素とそれらのすべてを包んだ、彼らはもう、コードのこの部分はもう動作しない理由です兄弟ではありません：

：

$(this).next('.inps').focus();

だけでそれを変更します

$(this).parent().next('.split4').find('input').focus();

$(document).on('input', '.inps', function(event) { 
 

 
    $(this).attr('type', 'tell'); 
 

 
    function showpanel() { 
 
    $('.inps').attr('type', 'password'); 
 
    $(this).attr('type', 'tell'); 
 
    } 
 

 
    // use setTimeout() to execute 
 
    setTimeout(showpanel, 1000); 
 

 
    // check for hyphen 
 
    var myLength = $(this).val().trim().length; 
 
    if (myLength == 1) { 
 
    $(this).parent().next('.split4').find('input').focus(); 
 
    $(this).parent().next('.split4').find('input').val(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="inps">enter number</label> 
 
    <br> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 

 
</div>