jquery nth-child selector가 2에서 시작하지 않습니다.

Question

매우 이상한 경우가 있습니다. 내가 $('.main-form .form-group:nth-child(4) input')을 검사 할 때 내 요소로

<div class="main-form col-sm-12"> 
    <label class="custom-control custom-checkbox"> 
     <input type="checkbox" class="custom-control-input"> 
     <span class="custom-control-indicator"></span> 
     <span class="custom-control-description">Update this Ticket?</span> 
    </label> 
    <div class="form-group row"> 
     <label for="update-subject" class="col-sm-3 col-form-label">Subject</label> 
     <div class="col-sm-9"> 
      <input type="text" class="form-control" id="update-subject" disabled> 
     </div> 
    </div> 
    <div class="form-group row"> 
     <label for="update-body" class="col-sm-3 col-form-label">Body</label> 
     <div class="col-sm-9"> 
      <textarea class="form-control" rows="5" id="update-body" disabled></textarea> 
     </div> 
    </div> 
    <div class="form-group row"> 
     <label for="update-email" class="col-sm-3 col-form-label">Email of contact</label> 
     <div class="col-sm-9"> 
      <input type="email" class="form-control" id="update-email" disabled> 
     </div> 
    </div> 
    <div class="form-group row"> 
     <label class="col-sm-3 col-form-label">Priority</label> 
     <div class="col-sm-3"> 
      <input type="text" class="form-control" disabled> 
     </div> 
     <div class="col-sm-3" style="display: none;"> 
      <select class="form-control col-sm-3" id="update-priority"> 
       <option value="normal">Normal</option> 
       <option value="low">Low</option> 
       <option value="high">High</option> 
       <option value="urgent">Urgent</option> 
      </select> 
     </div> 
     <label class="col-sm-3 col-form-label" style='text-align: center;'>Status</label> 
     <div class="col-sm-3"> 
      <input type="text" class="form-control" disabled> 
     </div> 
     <div class="col-sm-3" style="display: none;"> 
      <select class="form-control col-sm-3" id='update-status'> 
       <option value="new">New</option> 
       <option value="open">Open</option> 
       <option value="pending">Pending</option> 
       <option value="hold">Hold</option> 
       <option value="solved">Solved</option> 
       <option value="closed">Closed</option> 
      </select> 
     </div> 
    </div> 
    <div class="form-group row"> 
     <label for="update-comment" class="col-sm-3 col-form-label">Comment</label> 
     <div class="col-sm-9"> 
      <textarea class="form-control" rows="5" id="update-comment" disabled></textarea> 
     </div> 
    </div> 
</div> 

는 대신 2 개 input 요소 아무 것도 반환하지 않습니다. $('.main-form .form-group nth-child(n)')으로 여러 로그를 실행 해 보았습니다. 1 일 때 아무 것도 반환하지 않으며 같은 goest를 first-child으로 반환합니다. 2이면 첫 번째 요소를 반환합니다. 5 일 때 두 개의 input 자식 요소가 반환됩니다. 6 일 때 last-child과 동일한 요소를 반환합니다. 이것은 완전히 이해할 수없고 말도 안됩니다. 누구도 이걸 도와 주시겠습니까? #update-modal 이후

Answer 1

이 .form-group 요소가 아닌 자식 요소를 포함하고, 대신 nth-of-type를 사용해야합니다 : 예를 들어

$('#update-modal .main-form .form-group:nth-of-type(4) input'); 

:

$('#update-modal .main-form .form-group:nth-of-type(4) input').css('background', '#ff00ff')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="update-modal"> 
 
<div class="main-form col-sm-12"> 
 
    <label class="custom-control custom-checkbox"> 
 
     <input type="checkbox" class="custom-control-input"> 
 
     <span class="custom-control-indicator"></span> 
 
     <span class="custom-control-description">Update this Ticket?</span> 
 
    </label> 
 
    <div class="form-group row"> 
 
     <label for="update-subject" class="col-sm-3 col-form-label">Subject</label> 
 
     <div class="col-sm-9"> 
 
      <input type="text" class="form-control" id="update-subject" disabled> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="update-body" class="col-sm-3 col-form-label">Body</label> 
 
     <div class="col-sm-9"> 
 
      <textarea class="form-control" rows="5" id="update-body" disabled></textarea> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="update-email" class="col-sm-3 col-form-label">Email of contact</label> 
 
     <div class="col-sm-9"> 
 
      <input type="email" class="form-control" id="update-email" disabled> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label class="col-sm-3 col-form-label">Priority</label> 
 
     <div class="col-sm-3"> 
 
      <input type="text" class="form-control" disabled> 
 
     </div> 
 
     <div class="col-sm-3" style="display: none;"> 
 
      <select class="form-control col-sm-3" id="update-priority"> 
 
       <option value="normal">Normal</option> 
 
       <option value="low">Low</option> 
 
       <option value="high">High</option> 
 
       <option value="urgent">Urgent</option> 
 
      </select> 
 
     </div> 
 
     <label class="col-sm-3 col-form-label" style='text-align: center;'>Status</label> 
 
     <div class="col-sm-3"> 
 
      <input type="text" class="form-control" disabled> 
 
     </div> 
 
     <div class="col-sm-3" style="display: none;"> 
 
      <select class="form-control col-sm-3" id='update-status'> 
 
       <option value="new">New</option> 
 
       <option value="open">Open</option> 
 
       <option value="pending">Pending</option> 
 
       <option value="hold">Hold</option> 
 
       <option value="solved">Solved</option> 
 
       <option value="closed">Closed</option> 
 
      </select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="update-comment" class="col-sm-3 col-form-label">Comment</label> 
 
     <div class="col-sm-9"> 
 
      <textarea class="form-control" rows="5" id="update-comment" disabled></textarea> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>