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 。 當它為 2 時，它返回第一個元素。 當它是 5 時，它返回帶有兩個input子元素的元素。 當它是 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>