javascript - 如何使用相同的类从一个输入跳转到下一个输入（jQuery）

Question

我正在寻找一种方法来从输入跳转到具有相同类的下一个输入。表单中的输入应该相互链接（不是全部，而是一些）。这可以很容易地完成，因为布局很简单，但是布局可以并且将会改变，因此很难做类似 parent() -> next() 之类的事情。那么如何在不返回第一个元素的情况下找到具有相同类的表单/布局中的下一个输入（不想循环它们）。

表单代码（示例只是为了给你一个想法）

<form>
    <div>
        <input type="text" class="chainme"/>
    </div>
    <div>
        <input type="text"/>
    </div>
    <div>
        <input type="text"/>
    </div>
    <div>
        <div>
            <input type="text" class="chainme"/>
        </div>
        <div>
            <input type="text" class="chainme"/>
            <div>
                <input type="text"/>
                <input type="text" class="chainme"/>
            </div>
        </div>
    </div>
</form>

Answer 1

我能想到的最简单的方法是：

$('form').on('keypress','input',function(e){
    var eClassName = this.className,
        index = $(this).index('.' + eClassName) + 1;
    if (e.which === 13){
        e.preventDefault();
        $('input.' + eClassName)
            .eq(index)
            .focus();
    }
});​

JS 小提琴演示。

这假设您要按Enter键移动到input同一类的下一个。此外，该元素只有一个类。

参考：

• eq().
• index().
• on().

Answer 2

jQuerynext()允许你传入一个选择器——这会将它限制在你想要的类中，而不是回到开头。