Question

我正在寻找一种方法来将输入跳转到具有相同类的下一个输入。表单中的输入应该相互链接（不是除了一些）。这可以非常简单地完成，布局很简单，但布局可以并且会改变，因此很难做到像parent（） - ＆gt;这样的事情。下一个（）。那么如何使用相同的类找到表单/布局中的下一个输入而不返回第一个元素（不想循环它们）。

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

<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。此外，该元素只有一个类。

参考文献：

Answer 2

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

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

2 个答案: