help on jQuery working trying to autoFocus on the next input field after keyUp, being as generic as possible

Question

the HTML

<input class="fr pinPass" type="password" name="pin1" id="pin1_1" tabindex="100"/>
<label>Enter the third number</label>

<br class="cb"/>

<input class="fr pinPass" type="password" name="pin1" id="pin1_2" tabindex="101"/>
<label>Enter the fourth number</label>                                      
<br class="cb"/>

<input class="fr pinPass" type="password" name="pin1" id="pin1_3" tabindex="102"/>  
<label>Enter the second number</label>

the current jQuery

$(".pinPass").focus(function () {
    $(this).keyup(function(){
         $("input").siblings('.pinPass').filter(':first').focus();              
    });
});

the Problem:

I am trying to set autoFocus on the next input field after keyUp in each input field. So far I;ve come up with solution that keep looping thru until it gets to the last one being selected, or if I use the :first filter, it always return to the first one it finds on the page.

I don't think I can use next(), as it's not the next node in the set. There will always be labels separating each input field.

Any help would be much appreciated.

Answer 1

You can use :first, but .next() will only return the very next siblings if it matches the selector. Instead you want .nextAll() with a selector, like this:

$(".pinPass").keyup(function(){
  $(this).nextAll('.pinPass:first').focus();
});

You can test it out here.

Answer 2

Next can have selectors aswell.

$(this).next('input');