javascript - 选择下一个(不是立即)输入标签

Question

如果我有三个由 span 标签分隔的输入标签，像这样

<input class="some-class" type="number" maxlength="4">
<span class="bull">&bull;</span>
<input class="some-class" type="number"maxlength="4">
<span class="bull">&bull;</span>
<input class="some-class" type="number" maxlength="4">

如何使用 jQuery 选择下一个输入标签来做某事？我下面的 jQuery 代码没有使用 .next() 函数选择下一个输入标签

$(':input').keyup(function (e) {
    if ($(this).val().length == $(this).attr('maxlength')) {
        $(this).next(':input').focus();
    }
});

Answer 1

jQuery .next() method:

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

这是因为 .next() 方法返回了 紧跟其后的 sibling 元素。由于紧随其后的兄弟是 span，因此未选择任何内容。

一个选择是使用 .nextAll() method反而。然后上链.first()为了选择第一个匹配项:

$(this).nextAll(':input').first().focus();

Updated Example

$(':input').keyup(function (e) {
    if (this.value.length == $(this).attr('maxlength')) {
        $(this).nextAll(':input').first().focus();
    }
});