Not class selector in jQuery - GeeksforGeeks

31 May, 2019
Given a list of elements and the task is to not select a particular class using JQuery.
jQuery :not() Selector: This selector selects all elements except the specified element.Syntax:$(":not(selector)")Parameters: It contains single parameter selector which is required. It specifies the element which do not select. This parameter accepts all kind of selector.
Syntax:
$(":not(selector)")
Parameters: It contains single parameter selector which is required. It specifies the element which do not select. This parameter accepts all kind of selector.
jQuery not() Method: This method returns elements that do not match a defined condition. This method specifies a condition. Elements that do not match the condition are returned, and those that match will be removed. Mostly this method is used to remove one or more than one elements from a group of selected elements.Syntax:$(selector).not(condition, function(index))
Parameters:condition: This parameter is optional. It specifies a selector expression, a jQuery object or one or more than one elements to be removed from a group of selected elements.function(index): This parameter is optional. It specifies a function to run for every element in a group. If it returns true, the element is removed else, the element is kept.index: It specifies the index position of the element in the set
Syntax:
$(selector).not(condition, function(index))

Parameters:
condition: This parameter is optional. It specifies a selector expression, a jQuery object or one or more than one elements to be removed from a group of selected elements.
function(index): This parameter is optional. It specifies a function to run for every element in a group. If it returns true, the element is removed else, the element is kept.index: It specifies the index position of the element in the set
index: It specifies the index position of the element in the set
Example 1: In this example first all classes of starting GFG- are selected then class GFG-1 is removed from the selection using .not() method.
<!DOCTYPE HTML> <html>     <head>         <title>             Not class selector in jQuery.        </title>                  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </script>    </head>           <body style = "text-align:center;">               <h1 id = "h" style = "color:green;" >             GeeksForGeeks         </h1>          <p id = "GFG" style =             "font-size: 15px; font-weight: bold;">            click on button to change the text content            of all classes except GFG-1         </p>                  <p class = "GFG-1" style =             "font-size: 15px; font-weight: bold;">            GFG-1        </p>          <p class = "GFG-2" style =            "font-size: 15px; font-weight: bold;">            GFG-2        </p>                  <p class = "GFG-3" style =            "font-size: 15px; font-weight: bold;">            GFG-3        </p>                  <button id = "button">            Click here        </button>                  <p class = "GFG" style =            "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>             $("button").on('click', function() {                $('p[class^="GFG-"]').not('.GFG-1').text("new Content");                $(".GFG").text("Text content changed")            });                 </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
Example 2: In this example, first all classes of starting GFG- are selected then class GFG-1 is removed from the selection using :not selector.
<!DOCTYPE HTML> <html>     <head>         <title>             Not class selector in jQuery.        </title>                  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </script>    </head>           <body style = "text-align:center;">               <h1 id = "h" style = "color:green;" >             GeeksForGeeks         </h1>          <p id = "GFG" style =            "font-size: 15px; font-weight: bold;">            click on button to change the text content            of all classes except GFG-1         </p>                  <p class = "GFG-1" style =            "font-size: 15px; font-weight: bold;">            GFG-1        </p>                  <p class = "GFG-2" style =            "font-size: 15px; font-weight: bold;">            GFG-2        </p>                  <p class = "GFG-3" style =             "font-size: 15px; font-weight: bold;">            GFG-3        </p>                  <button id = "button">            Click here        </button>                  <p class = "GFG" style =            "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>                     $("button").on('click', function() {                $('p[class^="GFG-"]:not(.GFG-1)').text("new Content");                $(".GFG").text("Text content changed")            });                 </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
jQuery-Selectors
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
jQuery | ajax() Method
Scroll to the top of the page using JavaScript/jQuery
How to get the ID of the clicked button using JavaScript / jQuery ?
jQuery | children() with Examples
How to check whether a checkbox is checked in jQuery?
Installation of Node.js on Linux
Express.js express.Router() Function
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript