Jquery找到下一个输入元素，其间跨度为get undefined

Question

我有以下HTML代码：

<input type="text" name="username" width="40" size="9">
<span name="foo"></span>
<input type="password" name="password" width="40" size="9">

我想在点击用户名时获取下一个输入元素名称，以及我所做的：

$(document).on("click", function (e) {
    var NextElement = $(e.target).next().attr("name"); //return foo
});

但是，我得到了“foo”，我实际上想要下一个输入元素，所以我做了：

    var NextElement = $(e.target).next("input").attr("name"); // return undefined

正如我希望获得“密码”，这个返回“未定义”。

查看此peoblem的jsfiddle演示。

我做错了什么？

谢谢！

Answer 1

由于next仅检查以下元素，因此没有直接函数，但您可以这样做：

var NextElement = $(e.target).nextUntil("input").last().next().attr("name");

Demonstration

通常我会找到不依赖于元素顺序的另一种解决方案，例如给出相关元素的id的数据属性。当然，如果订单确实是决定要素的原因。

Answer 2

使用nextAll()：

http://jsfiddle.net/KBWdh/2/

var NextElement = $(e.target).nextAll("input").attr("name");

Answer 3

你可以这样做：

var NextElement = $(e.target).find("input:password").attr("name");

由于点击事件已添加到document，我们需要找到document中的输入，next()方法在此处不起作用，正如您所期望的那样。

Answer 4

next（）将返回下一个兄弟，无论你把什么放在括号中。或者正如文档所说：

如果提供了一个选择器，只有当它与该选择器匹配时，它才会检索下一个兄弟。

使用.next().next()或nextAll()

var NextElement = $(e.target).nextAll("input").filter(':first').attr("name");