jQuery get next element in a table below the current
<p>I have a crossword puzzle and am trying to move the cursor to the next letter box automatically after typing in a letter. I can do this going across but not sure about down. I would like to go across as priority #1 and if the next box is not a letter box it searches to see if it can go down. If it can't go across or down then nothing happens.</p>

<p>Here is what I have for going across:</p>

<pre><code>$('.crossword_puzzle input[type="text"]').keyup(function() {
   $(this).parent().parent().next().find('input[type="text"]').focus().select();
});
</code></pre>

<p>How could I go down if across is not found?</p>

<p>The DOM is an html table with an input box in each TD.</p>

<p>Thanks for your help.</p>

<p>EDIT - Heres is part of the table, forgot I have a set of divs in each td too. Also there is a div holding a number at the start of each word.</p>

<pre><code>    &lt;table class="crossword_puzzle"&gt;
&lt;tr&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="block_num"&gt;1&lt;/div&gt;
         &lt;input type="text" class="word_3_1 cp_move_across" maxlength="1" onClick="this.select();" id="x3y1" name="x3y1" value=""/&gt;
         &lt;div class="block_num"&gt;1&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;&lt;input type="text" class="word_3_1 cp_move_across" maxlength="1" onClick="this.select();" id="x4y1" name="x4y1" value=""/&gt;&lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;input type="text" class="word_3_1 cp_move_across" maxlength="1" onClick="this.select();" id="x5y1" name="x5y1" value=""/&gt;
         &lt;div class="block_num"&gt;2&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;&lt;input type="text" class="word_3_1 cp_move_across" maxlength="1" onClick="this.select();" id="x6y1" name="x6y1" value=""/&gt;&lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;&lt;input type="text" class="word_3_1 cp_move_across" maxlength="1" onClick="this.select();" id="x7y1" name="x7y1" value=""/&gt;&lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;&lt;input type="text" class="word_3_1 cp_move_down" maxlength="1" onClick="this.select();" id="x3y2" name="x3y2" value=""/&gt;&lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;&lt;input type="text" class="word_5_1 cp_move_down" maxlength="1" onClick="this.select();" id="x5y2" name="x5y2" value=""/&gt;&lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
         &lt;div class="black_block"&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="all_blocks"&gt;
</code></pre>

<p>What about this, taking @Kevin B answer below and adding a flag to switch which way the priority goes. Does anyone see an issue doing it this way? EDIT: added logical to flip direction priority based on if the next cell has text or not in the current priority order</p>

<pre><code>var priority_direction = 'across';
    $('.crossword_puzzle input[type="text"]').keyup(function() {
        if(priority_direction == 'across'){
            var next = $(this).closest('td').next().find('input[type="text"]');
            priority_direction = 'across';
            if (!next.length || next.val().length == 1) {
                var cellIndex = $(this).closest('td').index();
                next = $(this).closest('tr').next().children().eq(cellIndex).find('input[type="text"]');
                priority_direction = 'down';
            }
        } else {
            var cellIndex = $(this).closest('td').index();
            var next = $(this).closest('tr').next().children().eq(cellIndex).find('input[type="text"]');

            priority_direction = 'down';
            if (!next.length || next.val().length == 1) {
                next = $(this).closest('td').next().find('input[type="text"]');
                priority_direction = 'across';
            }
        }
        next.focus().select();
    });
</code></pre>
