Question 413911 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Incorrect :not() selector syntax

I’m trying to select all the input fields inside of the element #manage-company that do not have either the class .partner nor .representative-input, and then manipulate their classes. I tried to accomplish this with the line below, but I think my selection syntax is incorrect.

$('#manage-company input :not(.representative-input, .partner)').removeClass('form-control').addClass('form-control-plaintext');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="manage-company">
    <input type="text" class="form-control" id="manage-company-name">
    <input type="text" class="form-control" id="manage-company-stateRegistration">

    <div id="manage-company-representativesList">
        <input type="text" class="form-control representative-input">

        <input type="email" class="form-control representative-input">
    </div>

    <div id="manage-company-partnersList">
        <input type="text" class="form-control partner">
    </div>
</form>
Tags:

2

Answers


  1. 0

    Just remove the space between the input and the :not, like so:

    $('#manage-company input:not(.representative-input, .partner)').removeClass('form-control').addClass('form-control-plaintext');
    .form-control-plaintext {
  background-color: green;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="manage-company">
    <input type="text" class="form-control" id="manage-company-name">
    <input type="text" class="form-control" id="manage-company-stateRegistration">

    <div id="manage-company-representativesList">
        <input type="text" class="form-control representative-input">

        <input type="email" class="form-control representative-input">
    </div>

    <div id="manage-company-partnersList">
        <input type="text" class="form-control partner">
    </div>
</form>
    Login or Signup to reply.
  2. 0

    input :not indicates that selects the descendants of the input element by excluding those elements that match the condition in :not().

    That’s the reason why your code is failing.

    Remove the space and then it will work fine. (which will indicate that selects those elements which match the condition)

    Working snippet:

    $('#manage-company input:not(.representative-input, .partner)').removeClass('form-control').addClass('form-control-plaintext');
    .form-control-plaintext {
  border: 1px solid red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="manage-company">
  <input type="text" class="form-control" id="manage-company-name">
  <input type="text" class="form-control" id="manage-company-stateRegistration">
  <br><br>
  <div id="manage-company-representativesList">
    <input type="text" class="form-control representative-input">

    <input type="email" class="form-control representative-input">
  </div>
  <div id="manage-company-partnersList">
    <input type="text" class="form-control partner">
  </div>
</form>

    Note:

    added CSS to show you that now code is working

    Added <br> to just separate elements for better understandability

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search