JQuery 숨겨진 요소 입력 문제 트래핑

Question

문제가 있습니다. 알아낼 수없는 문제가 있습니다.

<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(); 
    }  
}); 

그래서 완벽하게 잘 작동 나는 기본적으로 display: none;이다 DIV의 세트가있다. 그럼 내가하려는 것은 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();