The .addClass() method in jQuery is used to add the specified class/classes to the required elements.
Please note that addClass() method will append new classes to specified elements and does not replace or remove the existing classes of an element.
Lets see an example.
In the below html content, we have a class 'selected' which has a property 'color:blue'.
We have a single paragraph <p>Hello</p> in the html body.
We also have a button 'Click Me!' on click of which we will be executing the javascript function 'myFunction'.
<html> <head> <style> .selected { color: blue; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <p>Hello</p> <button onclick="myFunction()">Click Me!</button> <script> function myFunction(){ $( "p" ).addClass( "selected" ); } </script> </body> </html>
Output:
Before button click
After button click
Please note that if we have multiple paragraph elements in our html body, all of them will be highlighted blue:
<html> <head> <style> .selected { color: blue; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <p>Hello</p> <p>and</p> <p>Goodbye</p> <button onclick="myFunction()">Click Me!</button> <script> function myFunction(){ $( "p" ).addClass( "selected" ); } </script> </body> </html>
If you would like to add the class only to a specific element, for example 2nd paragraph element, we can make use of something called :nth-child() selector.
<html> <head> <style> .selected { color: blue; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <p>Hello</p> <p>and</p> <p>Goodbye</p> <button onclick="myFunction()">Click Me!</button> <script> function myFunction(){ $( "p:nth-child(2)" ).addClass( "selected" ); } </script> </body> </html>
We can add multiple classes to an element by separating each class name with a space.
<html> <head> <style> .selected { color: blue; } .highlight { background: yellow; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <p>Hello</p> <p>and</p> <p>Goodbye</p> <button onclick="myFunction()">Click Me!</button> <script> function myFunction(){ $( "p:nth-child(2)" ).addClass( "selected highlight" ); } </script> </body> </html>
We can also write a function inside the addClass() method which conditionally returns the required class by checking the index or current class of a specific element.
The below function checks if the index of a paragraph in 1 (in other words, checks if it is a second paragraph), and returns or adds the class appropriately.
<html> <head> <style> .selected { color: blue; } .highlight { background: yellow; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <p>Hello</p> <p>and</p> <p>Goodbye</p> <button onclick="myFunction()">Click Me!</button> <script> function myFunction(){ $( "p" ).addClass(function( index, currentClass ) { if ( index === 1 ) { addedClass = "green"; return ("selected highlight"); } } ); } </script> </body> </html>
No comments:
Post a Comment