Open In App

Not class selector in jQuery

Last Updated : 31 May, 2019
Comments
Improve
Suggest changes
Like Article
Like
Report
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.
  • 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
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. html 
<!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. html 
<!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:

P
PranchalKatiyar
Improve
Article Tags :

Explore

Lightbox