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.
<!DOCTYPE HTML>
<html>
<head>
<title>
Not class selector in jQuery.
</title>
<script src =
</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 =
</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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
31 May, 2019
Like Article
Save Article