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:

获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

这是因为.next()方法会返回紧跟兄弟元素。由于紧随其后的兄弟是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();
    }
});

Answer 2

您可以使用.index()和.eq()方法：

var $inputs = $(':input');

$inputs.keyup(function(e) {
    if ( this.value.length == this.getAttribute('maxlength') )
       $inputs.eq( $inputs.index(this) + 1 ).focus();
});

Answer 3

你也可以使用.siblings（）来查找兄弟的输入：

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

选择下一个（不是立即）输入标签

3 个答案: