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>