Jquery find next input element with a span between get undefined

klsxnrf1 于 2023-06-22 发布在 jQuery

关注(0)|答案(4)|浏览(148)

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

正如我期望得到的“password”，这个返回“undefined”。
请看这个人的jsfiddle演示。
我做错了什么？
谢谢！

4条答案

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

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

Demonstration
通常我会找到另一种不依赖于元素顺序的解决方案，例如一个数据属性给出相关元素的id。当然，如果顺序确实决定了要获取的元素，则除外。

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

你可以这样做：

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

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

next（）将返回下一个兄弟，不管你在括号里放了什么。就像docs说的：

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

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

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