Question

I have a table as follows:

<table>
  <tr>
    <td><input id="c1" type="text" class=""></td>
    <td><input id="c2" type="text" class="readonly"></td>
    <td><input id="c3" type="text" class=""></td>
  </tr>
</table>

I’m implmenting some custom cell keyboard navigation, and for example, I would like to be able to move focus to a new cell on keyboard input, but skip over cells that match a given selector (Pressing the right arrow at the end of #c1 should move focus to the next cell that is not .readonly, likewise, pressing the left arrow at the beginning of #c3 should move focus to the last cell that is not .readonly.

I’ve got the code working to handle the keyboard events, but I’m having issues with my jQuery selector to move focus around. I can easily do what I want in a loop, but am looking for a more elegant way to do this. The selector I’m current using (for example, move “previous” from #c3 to #c2, (intended to be #c1)) is:

$(el).parent('td').prev('td').find('input').focus();

How can I basically do:

Element -> Parent 'td' -> Closest previous 'td' containing an 'input' element without the 'readonly' class

Answer 1

Try this

$(el).closest('td').prevAll('td:has(input:not(.readonly))').first().find('input').focus();