Jquery找到下一个输入元素，其范围在未定义之间答案

【问题标题】：Jquery find next input element with a span between get undefinedJquery找到下一个输入元素，其范围在未定义之间
【发布时间】：2013-06-04 12:16:44
【问题描述】：

我有以下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

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

查看jsfiddle 这个问题的演示。

我做错了什么？

谢谢！

【问题讨论】：

【解决方案1】：

由于next 仅检查紧随其后的元素，因此没有直接功能，但您可以这样做：

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

通常我会找到另一种不依赖元素顺序的解决方案，例如提供相关元素 id 的数据属性。当然，如果订单确实决定了要获取的元素。

【讨论】：

我不太明白你的回答，为什么不直接使用 nextAll() 方法？
它可以工作，但如果没有那么它就会被取消定义
@roasted nextAll 返回一组元素。由于attr 返回它起作用的第一个元素的属性值，但在我看来它并不干净（而且我不认为要使用 attr 的这个属性）。或者 nextAll('input').first() 将是一个解决方案。
是的，我在考虑。 Thx 破坏

【解决方案2】：

使用nextAll():

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

【讨论】：

【解决方案3】：

你可以这样做：

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

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

【讨论】：

【解决方案4】：

next() 将返回下一个兄弟，不管你在括号中放了什么。或者正如文档所说：

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

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

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

【讨论】：