获取jquery中的下一个（不是立即）元素

Question

我的HTML代码结构如下：

<!-- First Step -->
<fieldset>
    <div>
        <input type="text" name="username" />
    </div>
    <input type="button" name="next" value="Next" />
</fieldset>
<!-- Second Step -->
<fieldset>
    <div>
        <input type="password" name="password" />
    </div>
    <input type="button" name="next" value="Next" />
</fieldset>

我想这样做，如果一个用户按下回车键并选择了该字段，它会自动按下Next输入，然后我创建这个jQuery代码：

$('input[name="username"], input[name="password"]').keypress(function (e) {
    var key = e.which;
    if (key == 13) {
        $('input[name="next"]').click();
        return false;  
    }
});

它可以工作，但只有当用户在第一步中按Enter键时（在这种情况下是用户名）。当用户尝试在第二步（在这种情况下是密码）中按Enter键时，没有任何反应，因为代码单击页面下一个第一个输入，在这种情况下是第一步。

jQuery有一种方式，所以用户可以点击相应的下一个按钮？我找到了下一个函数，但它只有在它是下一个兄弟元素时才有效。

Answer 1

是name=next的两个按钮，这是问题，因为点击输入密码它选择第一个按钮，这是name=next

解决问题的方法是使用jquery库中提供的next()函数。

$( this ).parent().next('input[name="next"]').click();

---

另一个解决方案是使用名称值的唯一值，因为有两个具有相同名称的元素是个坏主意。尝试下面的前。

<fieldset>
    <div>
        <input type="text" name="username" />
    </div>
    <input type="button" name="usernamenext" value="Next" />
</fieldset>
<!-- Second Step -->
<fieldset>
    <div>
        <input type="password" name="password" />
    </div>
    <input type="button" name="passwordnext" value="Next" />
</fieldset>

而你的jquery就像

$('input[name="username"], input[name="password"]').keypress(function (e) {
    var key = e.which;
    if (key == 13) {
         $('input[name= "'+ $(this).attr('name') +'next"]').click();
        return false;  
    }
});

利用独特的意志将结束所有问题，

Answer 2

使用遍历来定位特定实例，并避免单击所有实例

$(this).parent().next().click();