How to select all elements without a given class using jQuery ?
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:
Please Login to comment...