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>

jquery nth-child选择器从2开始而不是1

1 个答案: