javascript - jQueryは、現在の下のテーブルの次の要素を取得します

Question

クロスワードパズルがあり、文字を入力した後、カーソルを次のレターボックスに自動的に移動しようとしています。私はこれを横切って行うことができますが、ダウンについてはわかりません。私は優先順位＃1として通過したいと思います。次のボックスがレターボックスでない場合は、下がることができるかどうかを検索します。横切ったり下がったりできない場合は、何も起こりません。

これが私が遭遇するために持っているものです：

$('.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">

これについてはどうでしょうか。以下の@KevinBの回答を取得し、優先順位を切り替えるフラグを追加してください。誰かがこのようにそれをしている問題を見ますか？編集：次のセルに現在の優先順位でテキストがあるかどうかに基づいて、方向の優先順位を反転する論理を追加しました

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

score 4 · Accepted Answer

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

score 1 · Accepted Answer

各セル（例<td class="r5 c16"></td>）にクラスを追加して、セル間のナビゲーションを容易にすることを検討してください。コードはかなりきれいに見える可能性があり、jQueryセレクターはより効率的になります。

javascript - jQueryは、現在の下のテーブルの次の要素を取得します

2 に答える 2

Related

Reference