Ошибка ввода скрытого элемента 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 классу?

Answer 1

Используйте переключатель :has() в селекторе в соответствии с DIV, который содержит видимый вход.

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