How to select a div with a certain class using jQuery ?
Given a HTML document containing many div element with classes. Here the task is to select a div with a certain class, that doesn’t have another class. There are two approaches to solve this problem. In one of them, we will use a method and in the other one, we will use not selector.
Approach 1: First, select the DIV with certain class using jQuery Selector and then use :not selector to ignore the elements of specific class.
- Example: This example implements the above approach.
html
<!DOCTYPE HTML> < html > < head > < title > Select a div with a certain class, that doesn't have another class. </ title > < style > body { text-align: center; } h1 { color: green; } .div { background: green; height: 50px; width: 200px; margin: 0 auto; color: white; border: 2px solid black; } </ style > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" > </ script > </ head > < body > < h1 > w3wiki </ h1 > < p > Click on button to select a div with a certain class, that doesn't have another class. </ p > <!-- div elements --> < div class = "first div" > This is first Div </ div > < br > < div class = "second div" > This is second Div </ div > < br > < div class = "third div" > This is third Div </ div > < br > < button onClick = "GFG_Fun()" > click here </ button > < br > < p id = "Beginner" > </ p > < script > /* main function */ function GFG_Fun() { /* using the :not selector */ $('.div:not(.first)') .css("background-color", "#173F5F"); $('#Beginner') .text("DIV Box of class 'first' is not selected."); } </ script > </ body > </ html > |
- Output:
Approach 2: First, select the DIV with certain class using jQuery Selector and then Use .not() method to ignore the elements of specific class.
- Example: This example implements the above approach.
html
<!DOCTYPE HTML> < html > < head > < title > Select a div with a certain class, that doesn't have another class. </ title > < style > body { text-align: center; } h1 { color: green; } .div { background: green; height: 50px; width: 200px; margin: 0 auto; color: white; border: 2px solid black; } </ style > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" > </ script > </ head > < body > < h1 > w3wiki </ h1 > < p > Click on button to select a div with a certain class, that doesn't have another class. </ p > <!-- div elements --> < div class = "first div" > This is first Div </ div > < br > < div class = "second div" > This is second Div </ div > < br > < div class = "third div" > This is third Div </ div > < br > < button onClick = "GFG_Fun()" > click here </ button > < br > < p id = "Beginner" > </ p > < script > /* main function */ function GFG_Fun() { /* using the .not() method */ $('.div').not('.first') .css("background-color", "#173F5F"); $('#GFG_DOWN') .text("DIV Box of class 'first' is not selected."); } </ script > </ body > </ html > |
- Output: