How to select all elements without a given class using jQuery ?
Last Updated :
07 Nov, 2019
All elements that do not match the given selector can be selected using jQuery( “:not(selector)” ). For example, the first example selects all the <li> elements which are not active.
Example 1: This example selects <li> elements which does not contains the class active.
<!DOCTYPE html>
< html >
< head >
< title >
How to select all elements without
a given class using jQuery ?
</ title >
< meta charset = "utf-8" >
< script src =
</ script >
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< b >
Select all elements without a< br >
given class using jQuery
</ b >
< ul >
< li class = "active" >element 1</ li >
< li >element 2</ li >
< li >element 3</ li >
< li >element 4</ li >
</ ul >
< script >
$("li:not(.active)").css(
"background-color", "yellow" );
</ script >
</ body >
</ html >
|
Output:
It can also be done using .not(selector).
Example 2: This example selects <div> elements which does not contains the class green or id blue.
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< script src =
</ script >
< style >
div {
width: 50px;
height: 50px;
margin: 10px;
float: left;
border: 2px solid black;
}
.green {
background: #8f8;
}
.orange {
background: orange;
}
#blue {
background: #99f;
}
</ style >
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< b >
Select all elements without a
given class using jQuery
</ b >
< br >< br >
< div ></ div >
< div id = "blue" ></ div >
< div ></ div >
< div class = "green" ></ div >
< div class = "green" ></ div >
< div class = "orange" ></ div >
< div ></ div >
< script >
$("div").not(".green, #blue")
.css("border-color", "red");
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...