我有一个填字游戏，我想在输入一个字母后自动将光标移动到下一个信箱。我可以做到这一点，但不确定下来。我想优先考虑＃1，如果下一个框不是信箱，它会搜索它是否可以关闭。如果它无法穿越或下降，那么没有任何反应。
以下是我遇到的问题：
$('.crossword_puzzle input[type="text"]').keyup(function() {
$(this).parent().parent().next().find('input[type="text"]').focus().select();
});
如果找不到对面，我该怎么办？
DOM是一个html表，每个TD都有一个输入框。
感谢您的帮助。
编辑--Heres是桌子的一部分，忘了我每个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();
});
答案 0 :(得分：4)
转到下一行而不是下一行。
$('.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();
});
答案 1 :(得分：1)
您可以考虑为每个单元格添加类（例如<td class="r5 c16"></td>）以简化它们之间的导航。你的代码看起来会更清晰，jQuery选择器会更有效率。