jQuery获取当前下方表格中的下一个元素

我有一个字谜游戏，我试图在输入字母后自动将光标移动到下一个字母框。我可以做到这一点，但不知道下来。我希望以优先级＃1的形式出现，如果下一个框不是信箱，它将搜索它是否可以关闭。如果它不能穿越或下降，那么什么都不会发生。jQuery获取当前下方表格中的下一个元素

以下是我对整个去：

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

我怎么能走下来，如果对面没有找到？

DOM是一个在每个TD中都有输入框的html表。

感谢您的帮助。

编辑 - 继承人是表的一部分，忘了我在每个td也有一组div。还有一个div在每个单词的开头都有一个数字。

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

这是怎么回事，下面@Kevin B答案和添加一个标志来切换优先顺序。有没有人看到这样做的问题？编辑：添加的逻辑翻转基于方向优先如果下一个单元格具有文本或不在当前优先顺序

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(); 
    });

来源

2013-03-26 Danny

请发布标记。 – undefined 2013-03-26 21:46:43

我们是否应该从中猜测HTML结构？ – adeneo 2013-03-26 21:47:04

使用'：eq（）'可以更容易完成。如果你想向右移动，只需增加索引i'：eq（i）'，如果你想下去，把单元格/行的数目加到那个数字'：eq（i + n）'上。 – Cristy 2013-03-26 21:48:03

转到下一行，而不是下一个TD。

$('.crossword_puzzle input[type="text"]').keyup(function() { 
    var next = $(this).closest('td').next().find('input[type="text"]'); 
    if (!next.length) { 
     var cellIndex = $(this).closest('td').index(); 
     next = $(this).closest('tr').next().children().eq(cellIndex).find('input[type="text"]'); 
    } 
    next.focus().select(); 
});

来源

2013-03-26 21:47:26

这确实有一个致命的缺陷;如果你正在填写一个垂直的单词并且碰到一个过路口，它将开始向右而不是继续向下。我不知道如何解决这个问题。 – 2013-03-26 21:52:25

如果你提供一个html样本，我会愿意尝试修复这个漏洞。 – 2013-03-26 22:06:19

这是按我所问的方式工作，但是如果它碰到另一个字时，它确实具有向下移动的奇怪特性。 – Danny 2013-03-26 22:18:04

您可能会考虑向每个单元添加类（例如，<td class="r5 c16"></td>）以简化它们之间的导航。你的代码可能看起来更干净，jQuery选择器会更有效率。

来源

2013-03-26 21:51:37 Octopus

jQuery获取当前下方表格中的下一个元素

回答

相关问题