jquery nth-childセレクタが2から始まらない1

Question

非常に奇妙なケースを満たしています。私の要素

<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> 

私は$('.main-form .form-group:nth-child(4) input')をチェックすると、それは何の代わりに、2つのinput要素を返しません。私は$('.main-form .form-group nth-child(n)')でいくつかのログを実行しようとしました。 1のときは何も返しません。first-childと同じgoestを返します。 2のとき、最初の要素を返します。それが5の場合、2つの子を持つ要素を返します。 6の場合、last-childと同じ要素を返します。これは全く理解できないばかげたことです。誰も私にこれを手伝ってもらえますか？

Answer 1

#update-modalが.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>