jQuery的查找下一個輸入元素與之間的跨度得到了一個未定義

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 
}); 

但是，我越來越「富」，而其實我是想下一個輸入元素，所以我做：

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

正如我期望得到「密碼」，這個返回「未定義」。

請參閱jsfiddle演示此peoblem。

我做錯了什麼？

謝謝！

Answer 1

使用nextAll()：

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

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

Answer 2

你可以這樣做：

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

因爲，單擊事件被添加到document，我們需要找到在document輸入，next()方法在這裏不起作用，正如你所預料的那樣。

Answer 3

next（）將返回下一個兄弟，不管你放在括號中。或者如文檔所述：

如果提供了選擇器，則只有在匹配該選擇器時纔會檢索下一個兄弟。

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

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

Answer 4

至於next只爲眼前的下列元素的檢查，沒有直接的功能，但你可以這樣做：通常

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

Demonstration

我會找到另一個解決方案依賴元素順序，例如給出相關元素的ID的數據屬性。當然，如果訂單確實是決定要素獲得的因素。