jQuery selector next child of nested elements

Question

How to select the next input within nested elements? For example: when currently selecting 1a, pressing the down arrow key should select 2x, and down again should select 3x, and so on until 6x. In the other case, if currently selecting 1a, press the right arrow key should select 1b.

html:

<div class='id_group'>
    <div class='id_row'>
        <div><div><input value='1a' /></div></div>
        <div><div><input value='1b' /></div></div>
    </div>
    <div class='id_row'>
        <div><div><input value='2a' /></div></div>
        <div><div><input value='2b' /></div></div>
    </div>
</div>
<div class='id_group'>
    <div class='id_row'>
        <div><div><input value='3a' /></div></div>
        <div><div><input value='3b' /></div></div>
        <div><div><input value='3c' /></div></div>
    </div>
    <div class='id_row'>
        <div><div><input value='4a' /></div></div>
        <div><div><input value='4b' /></div></div>
    </div>
</div>
<div class='id_group'>
    <div class='id_row'>
        <div><div><input value='5a' /></div></div>
        <div><div><input value='5b' /></div></div>
        <div><div><input value='5c' /></div></div>
    </div>
    <div class='id_row'>
        <div><div><input value='6a' /></div></div>
        <div><div><input value='6b' /></div></div>
    </div>
</div>

jquery:

$('input').keyup(function(e){
    if(e.which==40)$(this).closest('.id_group, .id_row').next().find('input').focus();
    if(e.which==39)$(this).closest('.id_row').next().find('input').focus();
});

TIA

Answer 1

You can use .eq() or .get() . But .get() will throw errors around the boundaries so I used .eq()

var inputs stores the references of all the elements that have a keyup event attached. It will look like this [input, input, input, input, input, input, input, input, input, input, input, input, input, input]

In inputs.index($(this)) $(this) refers to the current element that you are on and .index will get the position of current element from the array.

var inputs = $('input').keyup(function(e) {
  var index = inputs.index($(this));
  if (e.which == 40) {
    inputs.eq(index + 2).focus();
  }
  if (e.which == 39) {
    inputs.eq(index + 1).focus();
  }
  if (e.which == 38 && index > 0) {
    inputs.eq(index - 1).focus();
  }
});

 var inputs = $('input').keyup(function(e) { var index = inputs.index($(this)); if (e.which == 40) { inputs.eq(index + 2).focus(); } if (e.which == 39) { inputs.eq(index + 1).focus(); } if (e.which == 38 && index > 0) { inputs.eq(index - 1).focus(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='id_group'> <div class='id_row'> <div> <div> <input value='1a' tabindex="1" /> </div> </div> <div> <div> <input value='1b' tabindex="3" /> </div> </div> </div> <div class='id_row'> <div> <div> <input value='2a' /> </div> </div> <div> <div> <input value='2b' /> </div> </div> </div> </div> <div class='id_group'> <div class='id_row'> <div> <div> <input value='3a' /> </div> </div> <div> <div> <input value='3b' /> </div> </div> <div> <div> <input value='3c' /> </div> </div> </div> <div class='id_row'> <div> <div> <input value='4a' /> </div> </div> <div> <div> <input value='4b' /> </div> </div> </div> </div> <div class='id_group'> <div class='id_row'> <div> <div> <input value='5a' /> </div> </div> <div> <div> <input value='5b' /> </div> </div> <div> <div> <input value='5c' /> </div> </div> </div> <div class='id_row'> <div> <div> <input value='6a' /> </div> </div> <div> <div> <input value='6b' /> </div> </div> </div> </div> 

Btw up key is 38

Hope this helps