JQuery隐藏元素输入问题遍历

Question

我有一个问题我想不通。我有一组 DIV，默认情况下是 display: none;：

<div id="pivot">
    <div id="leftcol">Pivot</div>
    <div id="rightcol">
        <input class="small" value="030-" disabled />
        <input class="input" id="pi" maxlength="6" />
        <span id="pit"></span>
    </div>
</div>
<div id="pos1">
    <div id="leftcol">Position 1</div>
    <div id="rightcol">
        <input class="small" value="031-" disabled />
        <input class="input" id="p1" maxlength="6" />
        <span id="p1t"></span>
    </div>
</div>
<div id="pos2">
    <div id="leftcol">Position 2</div>
    <div id="rightcol">
        <input class="small" value="031-" disabled />
        <input class="input" id="p2" maxlength="6" />
        <span id="p2t"></span>
    </div>
</div>
<div id="pos3">
    <div id="leftcol">Position 3</div>
    <div id="rightcol">
        <input class="small" value="031-" disabled />
        <input class="input" id="p3" maxlength="6" />
        <span id="p3t"></span>
    </div>
</div>
<div id="pos4">
    <div id="leftcol">Position 4</div>
    <div id="rightcol">
        <input class="small" value="031-" disabled />
        <input class="input" id="p4" maxlength="6" />
        <span id="p4t"></span>
    </div>
</div>
<div id="pos5">
    <div id="leftcol">Position 5</div>
    <div id="rightcol">
        <input class="small" value="031-" disabled />
        <input class="input" id="p5" maxlength="6" />
        <span id="p5t"></span>
    </div>
</div>
<div id="pos6">
    <div id="leftcol">Position 6</div>
    <div id="rightcol">
        <input class="small" value="031-" disabled />
        <input class="input" id="p6" maxlength="6" />
        <span id="p6t"></span>
    </div>
</div>

然后此代码取消隐藏相关部分：

$.ajax({        
    url: "getSerial.asp",
    data: { term: term },
    dataType: "json",
    success: function(data) {
        $('option:selected').append('-' + data[0].sn)
        $('#prefix').attr('disabled', true)
        var code = data[0].partno.substring(6, 12);
        len = code.length;
        $('#pivot').show(0);
        for (var i = 0; i < len; i++) {
            if (code.substr(i, 1) != "-") {
                $('#pos' + code.substr(i, 1)).show(0);
            }                   
        }
        $('div').find('input:enabled').first().focus();
    }       
});

这样效果很好。然后我要做的是当你输入 6 个字符时，它会自动跳转到下一个可见输入 (class="input")。我的代码非常不迷人，只能与下一个逻辑 div （pos1、pos2 等）一起使用。组合可能是 pos1,pos3,pos3，所以漏掉了数字 2（因为它仍然是隐藏的）。

$(this).parent('div').parent('div').next('div').find('.input:visible').focus()

这不适用于上述组合。如何仅成功遍历到下一个可见的 .input class?

Answer 1

在选择器中使用 :has() 以匹配包含可见输入的 DIV。

$(this).parent('div').parent('div').nextAll('div:has(.input:visible)').first().find('.input:visible').focus();

JQuery隐藏元素输入问题遍历

JQuery hidden element input issue traversing

html

javascript

jquery

tree-traversal