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>元素（{ {1}}或.next()），然后在其中找到.next('span')元素（.anBox），然后将其关注（.find('.anBox')）。看起来像这样：

.focus()

查看updated jsFiddle demo。

Answer 2

您对.next（）的使用不正确。请尝试使用

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

Answer 3

因为.anBox没有“下一个”。下一个.anBox在另一个范围内。你必须climb up one parent span, then go to the next span, and find an .anBox there：

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

此外，您正在比较脚本中始终为“1”的maxLength。只有按下“1”

时，您的下一个输入框才会聚焦

Answer 4

next()没有为您提供DOM中的下一个匹配元素。它只为你提供下一个兄弟，如果它与你作为选择器传递的那个匹配。

为了获得您的目标，您可以使用nextInDOM()实用程序（免责声明：我是作者）并使用它：

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

为什么密钥不起作用

4 个答案: