如何使用相同的类从一个输入跳转到下一个输入（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 Fiddle demo.

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

参考资料：

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

Answer 2

jQuery next() 允许您传入一个选择器 - 这会将其限制为仅您想要的类，而不是回到开头。