javascript - 如何在和元素之间遍历？

Question

我有一个 html 表结构如下:

<table>     
    <tr><td>ABC</td></tr>
    <tr>
        <td><input class="inp"/></td>
        <td><input class="inp"/></td>
    </tr>
    <tr><td><input class="inp"/></td></tr>
    <tr><td><input class="inp"/></td></tr>
</table>
<button id="btn">Click me</button> 

然后我的目的是让焦点始终通过单击按钮转到“inp”类中的下一个输入字段。这是我的脚本:

var focused = null;
$(".inp").focus(function () {
    focused = $(this);
}).first().focus();

$("#btn").click(function(e){
     if (focused && focused.length) { 
        //this only works horizontally. 
        focused.parent().next().find(".inp").focus();

        // this only works vertically. 
        //focused.closest("tr").next().find(".inp").focus();
     }
});

我想聚焦第一行最后一个元素之后的第二行。我如何结合这两个语句？

Answer 1

您可以使用 JQuery .index() 来执行此操作和 .eq()在所有输入元素的包装集上运行函数。

当焦点位于最后一个输入并单击按钮时，这会将焦点移回到第一个输入。

$(function() {
    var $inputs = $('.inp');

    var index = null;

    $inputs.focus(function() {
        index = $inputs.index($(this));
    });

    $inputs.first().focus();

    $('#btn').click(function(e) {
         if (index != null) {
             index = (index + 1) % $inputs.length;
             $inputs.eq(index).focus();
         }
    });
});

jsfiddle

此版本不会将焦点返回到第一个输入。

$('#btn').click(function(e) {
     if (index != null) {
         if ((index + 1) < $inputs.length) {
             $inputs.eq(index + 1).focus();
         }
     }
});

jsfiddle