jQuery: Как перейти от одного td к другому другому td в таблице

Question

Я новичок в jQuery, поэтому я мог бы подойти к этому неправильно, но надеюсь, что кто-то здесь может мне помочь.

У меня есть довольно большая таблица HTML, которая создается динамически. Чтобы помочь пользователю, я хотел бы привязать событие навигации к клавишам со стрелкой только для этой таблицы. В этом примере я хотел бы «прыгать» с на div на следующий div (у них также есть класс "myClass"). Таблица больше, чем пример ниже, но структура всегда повторяется, поэтому каждый третий td имеет (редактируемый) div.

До сих пор я не мог заставить это работать, но функция действительно захватывает стрелку, так как я могу показать предупреждения таким образом.

Мой JQuery:

$(document).on('keydown', '#tblCalendar', function(e){ 
    switch(e.which) { 
     case 37: // left 
      // similar action to the left 
      break;     
     case 39: // right 
      $(this).closest('td').next().next().next().find('div').focus(); 
      break;   
     default: return; // exit handler 
    } 
    e.preventDefault(); // prevent default action 
}); 

Мой HTML (упрощенно):

<tbody> 
    <tr> 
     <td></td> 
     <td></td> 
     <td><div class="myClass"></div></td> 
     <td></td> 
     <td></td> 
     <td><div class="myClass"></div></td> 
     // ... 
    </tr> 
    // ... 
</tbody> 

Большое спасибо заранее, Майк

Answer 1

Я немного перестроил вашу функцию. Теперь он будет включать только один запрос DOM для сбора всех редактируемых элементов и сохранения их в переменной. Вы можете вращаться через все из них, используя слева и правый клавиши со стрелками. Если ни один элемент не выбран, он получает первый. Я добавил класс к demonstrate that behavior. Чтобы отрегулировать это по вашим потребностям, просто замените .addClass('active') на .get(0).focus().

Пример принципала с классом, который переключает

var focusable = $('div.myClass'); 
var current = null; 

$(document).on('keydown', function(event) { 
    var next = null; 

    if (37 == event.which || 39 == event.which) { 
     if (null == current) { 
      current = 0; 
      focusable.eq(current).addClass('active'); 
      return; 
     } 

     if (37 == event.which) { 
      next = current - 1; 
      if (0 > next) { 
       next = focusable.length - 1; 
      } 
     } 

     if (39 == event.which) { 
      next = current + 1; 
      if (focusable.length == next) { 
       next = 0; 
      } 
     } 

     focusable.eq(current).removeClass('active'); 
     focusable.eq(next).addClass('active'); 
     current = next; 
    } 
}); 

Снижение кода, когда нет никакого класса тумблер не участвует

var focusable = $('div.myClass'); 
var current = null; 

$(document).on('keydown', function(event) { 
    if (37 == event.which || 39 == event.which) { 
     if (null == current) { 
      current = 0; 
      focusable.eq(current).get(0).focus(); 
      return; 
     } 

     if (37 == event.which) { 
      --current; 
      if (0 > current) { 
       current = focusable.length - 1; 
      } 
     } 

     if (39 == event.which) { 
      ++current; 
      if (focusable.length == current) { 
       current = 0; 
      } 
     } 

     focusable.eq(current).get(0).focus(); 
    } 
}); 

Demo

Try before buy
Try before buy with focusable divs

Answer 2

Вы должны использовать nextUntil, чтобы найти следующий td с div в нем:

$(this).closest('td').nextUntil("td div").focus(); 

Хотя я не уверен, как div может получить focus

Поскольку this ссылается на всю таблицу, изменить обработчик следить за нажатиями на contenteditable div

$(document).on('keydown', '#tblCalendar tr td div', function(e){