為什么按鍵不起作用

Question

我正在嘗試使我的輸入文本字段在鍵盤輸入時集中在下一行。

jQuery代碼：

for (var counter = 0; counter < 4; counter++) {
    $("<input>", {
        "class":"anBox",
        size: 1,
        maxlength: 1
    }).appendTo('#answerLine_' + counter);
};
$(".anBox").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.anBox').focus();
    }
});

這是一個： jsfiddle

Answer 1

您對.next()的使用不正確。 .next()函數查找當前集中元素的下一個同級 ，還可以選擇檢查下一個同級是否與提供的選擇器匹配。

但是，您的<input>元素位於不同的<span>元素中，因此它們不是兄弟姐妹，因此無法使用.next()進行匹配。

您需要做的是從當前的<input> （ $(this) ）到其父項（ .parent() ），再到下一個<span>元素（ .next()或.next('span') ），然后在該（ .find('.anBox') ）內部找到.anBox元素，然后對其進行聚焦（ .focus() ）。 看起來像這樣：

$(this).parent().next().find('.anBox').focus();

看一下更新的jsFiddle演示 。

Answer 2

您對.next（）的使用不正確。嘗試使用

$(this).parent().next('span').find('.anBox').focus();

Answer 3

因為.anBox沒有“下一個”。 下一個.anBox在另一個范圍中。 您必須爬上一個父跨度，然后轉到下一個跨度，並在其中找到一個.anBox ：

if (this.value.length == this.maxLength) {
  $(this).parent().next().find('.anBox').focus();
}

另外，您正在與腳本中始終為“ 1”的maxLength進行比較。 如果您按下“ 1”，則下一個輸入框將僅聚焦

Answer 4

next()不會為您提供DOM中的下一個匹配元素。 如果它與您作為選擇器通過的內容匹配，則僅給您下一個同級。

為了獲得您想要的東西，可以使用nextInDOM（）實用程序（ 免責聲明：我是作者 ）並像下面這樣使用它：

$(this).nextInDOM('.anBox').focus();