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獲取當前下方表格中的下一個元素

回答

相關問題