jQuery / javascript - Skip input when maxlength is reached

Question

Good morning friends!

Next, I want to make a function that if it reaches the maxlength of the input (in case 2 characters), it jumps to the next input. I made the code below that is not running...

var inputZin = $('.idade-viajantes only-number');
var jumpInput = function() {
  if(inputZin.value.length == 2) {
    $(this).parents(input).next.focus();
  }
}

<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" onkeyup="jumpInput()"/>
            <input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" onkeyup="jumpInput()"/>
            <input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" onkeyup="jumpInput()"/>
            <input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" onkeyup="jumpInput()"/>
            <input class="idade-viajantes only-number" name="idade" maxlength="2" type="text"/>
            
         <script src="jquery.js"></script>

Previously, I had done a pure javascript logic, but used id’s in each input... so I tried using jQuery to use "parents" and "next" only that it is not rolling.

Thank you in advance!

Answer 1

Try

$(".idade-viajantes").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).next('.idade-viajantes').focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" />
<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" />
<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" />
<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" />
<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" />