自定义箭头键导航无法正常工作（一部分有效）

Question

我有一个很大的 HTML table，其中包含动态添加的行。

table 具有标准结构（包括 thead、tbody 和 tfoot）。

在此 table 中有 editable TDs（具有 class "editable" 并包含 contenteditable div）和非 editable TD（没有 class "editable" 并且不包含 div）。

我正在尝试创建一个自定义箭头键导航，允许我从一个 editable TD 跳转到下一个或上一个 （就像在 Excel table)。

为了对此进行测试，我使用了下面的示例，但这仅部分起作用，即警报显示正确，但我无法对相应的 div 执行任何操作（例如更改其背景或添加文本ETC。）。

谁能告诉我我做错了什么？

我的jQuery（文档准备就绪）：

$(document).keydown(function(e){
    switch(e.which){
        case 37: // left arrow
            alert('test left');
            $(this).closest('td').prevUntil('td.editable').find('div').text('test');
            break;
        case 39: // right arrow
            alert('test right');
            $(this).closest('td').nextUntil('td.editable').find('div').text('test');
            break;
        default: // exit for other keys
            return;
    }
    e.preventDefault(); // prevent default action
});

我的 HTML（示例行）：

<tr>
    // ...
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <td></td> <!-- non-editable -->
    <td></td> <!-- non-editable -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    // ...
</tr>

Answer 1

this 在你的代码中指的是 document 不是单个元素

如果你使用$(e.target)你可以获得单个元素

你也应该使用 next() function instead of nextUntil()

$(e.target).closest('td').nextAll('td.editable:first').find('div').text('test');

自定义箭头键导航无法正常工作（一部分有效）

Custom arrow key navigation not working properly (one part works)

javascript

jquery

arrow-keys