Updated April 11, 2023
Introduction to jQuery :not() selector
The jQuery UI :not() selector method is used to return the results of all the elements except the specified selector from the set of matched elements. The jQuery UI :not() selector method is a built in method in the jQuery UI library. To jQuery :not() selector method give the jQuery object that represents a set of DOM elements and it creates the new jQuery object which contains the result of all the elements except the passed selector. The jQuery UI :not() selector method work as, the specified selector checks against each element, the elements which are not matched the selectors will be return as a result and then we can apply common behavior to them, so it accept a string parameter which contains a selector, a DOM element, or a array element.
It can accept single or multiple selectors, if multiple selectors in a single jQuery is passed, then each selector or element should be separated by the comma. The selector or html elements can be name or id or class of the element. To select all element except one element, then specify the css selector to $(), for example $(“p”) selects all the elements except the p elements in the document and to skip multiple elements then specify as $(“selector1, selector2, …”), for example $(“p, div, span”), so it selects all the elements except p, div and span elements in the document.
Syntax
Given below is the simple syntax to use the :not() selector:
selector.not( selector )It uses to selects all the elements except the specified selector from the set of matched elements.
Parameters:
- selector: This parameter specifies the element to be skipping, for multiple skip it could be a comma separated list of selectors.
The return value of this method is an array filled with the elements except the specified selector element.
Examples of jQuery :not() selector Method
Given below are the examples mentioned:
Example #1
We write the html code to understand the jQuery :not() selector method with the following example, where the :not() selector method will be used to not be select the specified elements based on their name.
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<title>This is an example for jQuery UI :not() selector method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p, div, span").not("p").css( "background-color", "red" );
});
</script>
</head>
<body>
<p class = "p1">This is the first p element of the DOM.</p>
<p class = "p2">This is the second p element of the DOM.</p>
<span class = "span1">This is the first span element of the DOM. <p class = "p1">This is the third p element of the DOM. </p> </span>
<p class = "p1">This is the fourth p element of the DOM. <span class = "span2">This is the second span element of the DOM. </span> </p>
<div class = "div1">This is the first div element of the DOM. </div>
</body>
</html>Output:
As in the above program the multiple elements(p, div and span) are selected by their name and then the p element is skip through the line of code” $(“p, div, span”).not(“p”).css(“background-color”, “red”);” and apply some style to them except the p element.
Example #2
Next, we rewrite the above html code to understand this method with the following example, where the :not() selector method will be used not to be select the specified elements based on their class.
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<title>This is an example for jQuery UI :not() selector method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p, div, span").not(".p1").css( "background-color", "red" );
});
</script>
</head>
<body>
<p class = "p1">This is the first p element of the DOM.</p>
<p class = "p2">This is the second p element of the DOM.</p>
<span class = "span1">This is the first span element of the DOM. <p class = "p1">This is the third p element of the DOM. </p> </span>
<p class = "p1">This is the fourth p element of the DOM. <span class = "span2">This is the second span element of the DOM. </span> </p>
<div class = "div1">This is the first div element of the DOM. </div>
</body>
</html>
Output:
As in the above program the multiple elements(p, div and span) are selected by their name and then the elements having “p1” class are skipped through the line of code “$(“p, div, span”).not(“.p1”).css(“background-color”, “red”);” and apply some style to them except the element of class “p1”.
Example #3
Next we rewrite the above html code to understand the jQuery :not() selector method with the following example, where the :not() selector method will be used for not to select multiple selectors based on their id.
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<title>This is an example for jQuery UI :not() selector method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p, div, span").not("#pid1, #spanid1").css( "background-color", "red" );
});
</script>
</head>
<body>
<p class = "p1" id = "pid1">This is the first p element of the DOM.</p>
<p class = "p2" id = "pid2">This is the second p element of the DOM.</p>
<span class = "span1" id = "spanid1">This is the first span element of the DOM. <p class = "p1" id = "pid1">This is the third p element of the DOM. </p> </span>
<p class = "p2" id = "pid2">This is the fourth p element of the DOM. <span class = "span2" id = "spanid2">This is the second span element of the DOM. </span> </p>
<div class = "div1" id = "divid1">This is the first div element of the DOM. </div>
</body>
</html>Output:
As in the above program the multiple elements(p, div and span) are selected by their name and then the elements having “pid1” and “spanid1” id are skipped through the line of code $(“p, div, span”).not(“#pid1, #spanid1”).css( “background-color”, “red” );” and apply some style to them except the elements of id “pid1” and “spanid1”.
Conclusion
The jQuery UI :not() selector is a built in method in the jQuery UI library which is used method to get all the elements except the element matched with the specified selector from the set of matched elements.
Recommended Articles
This is a guide to jQuery :not() selector. Here we discuss the introduction to jQuery :not() selector along with examples respectively. You may also have a look at the following articles to learn more –
