Question

我想通过js作为选择器访问输入标签的输入或类，以便我可以通过键盘箭头访问下一个输入元素。通过提及类名，它不可访问，但在删除输入标记以外的所有标记并仅输入＆＃39;输入＆＃39;作为选择器，此代码可以正常工作，就像在此Fiddle

中一样

但是当我尝试使用类名访问它时，它无法访问。

这是我的Fiddle

使用的代码：

<table id="foo">
<tr>
    <td height="30px">
        <input type="text" class="nav_class" value="">
    </td>
    <td height="30px">
        <input type="text" class="nav_class" value="">
    </td>
    <td height="30px">
        <input type="text" class="nav_class" value="">
    </td>
    <td height="30px">
        <input type="text" class="nav_class" value="">
    </td>
</tr>
</table>

<script>
$(".nav_class").keydown(function (e) {

    if (e.keyCode == 40) {
        alert('a');
        $(this).next(".nav_class").focus();
    }
});
</script>

Answer 1

这是因为输入包含在td中。你需要使用：

 $(this).parent().next().find(".nav_class").focus();

完整代码：

$(".nav_class").keydown(function (e) {

if (e.keyCode == 40) {
    alert('a');
    $(this).parent().next().find(".nav_class").focus();
}});

DEMO

Answer 2

使用find查找特定的元素

 $(".nav_class").keydown(function (e) { 
    if (e.keyCode == 40) {
        $(this).parent().next().find(".nav_class").focus();
    }
});

$(this).parent()选择当前的父级
$(this).parent().next()选择当前的父级下一个兄弟姐妹
$(this).parent().next().find(".nav_class")找到nav_class

Updated demo

Answer 3

尝试做：

$(".nav_class").keydown(function (e) {    
    if (e.keyCode == 40) {
        alert('a');
        $(this).closest('td').next().find('.nav_class').focus();
    }
});

Demo

Answer 4

$('#foo').on('keydown', 'td', function(e) { //use bubbling for less events attaching
    var $next = null, //for caching next td element
        keyCode = e.keyCode || e.charCode // charCode for IE browsers;
    if (keyCode == 40 && ($next = $(this).next()).length) { //save next td elements to do less operations
        $next.find('.nav_class').focus();
    }
});

使用哪个选择器？

4 个答案:

Updated demo