Last Updated on February 14, 2021 by Roshan Parihar
In this tutorial, learn how to select multiple classes of elements in jQuery. The short answer is: use the comma-separated classes within jQuery $(" ") to select more than one class.
The syntax is:
Let’s find out with the examples given below.
How to Select Multiple Classes of Elements in jQuery
If you want to select multiple class names of elements, you have to specify the multiple comma-separated classes of the elements that you want to select within jQuery $(" "). You can specify as many classes as you want with each class separated by comma(,) as given below:
Example
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function(){ $(".paraone, .parathree, .parasix").css("background", "yellow"); }); </script> <p class="paraone">First paragraph with class 'paraone'.</p> <p class="paratwo">Second paragraph with class 'paratwo'.</p> <p class="parathree">Third paragraph with class 'parathree'.</p> <p class="parafore">Forth paragraph with class 'parafore'.</p> <p class="parafive">Fifth paragraph with class 'parafive'.</p> <p class="parasix">Sixth paragraph with class 'parasix'.</p> |
Output
First paragraph with class ‘paraone’.
Second paragraph with class ‘paratwo’.
Third paragraph with class ‘parathree’.
Forth paragraph with class ‘parafore’.
Fifth paragraph with class ‘parafive’.
Sixth paragraph with class ‘parasix’.
The above example contains six paragraphs with content inside them. It selects three paragraphs using the jQuery select multiple classes method. After selecting the multiple elements, it applies a background color to the selected elements.
Remove Class From Multiple Elements Using jQuery
In addition to the above method, you can also select multiple classes and remove a class after selecting them. You can use the jQuery removeClass() method of jQuery to remove the classes after selecting the multiple elements to check and remove as given below:
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> $(document).ready(function(){ $('#btnRemoveclass').click(function(){ $(".pone, .ptwo, .pthree, .psix").removeClass('delnone'); }); }); </script> <style> .delnone{ font-size: 20px; color: red; } </style> <p class="pone delnone">First paragraph with class 'paraone'.</p> <p class="ptwo delnone">Second paragraph with class 'paratwo'.</p> <p class="pthree delnone">Third paragraph with class 'parathree'.</p> <p class="pfore">Forth paragraph with class 'parafore'.</p> <p class="pfive">Fifth paragraph with class 'parafive'.</p> <p class="psix delnone">Sixth paragraph with class 'parasix'.</p> <button type="button" id="btnRemoveclass">Click me to Remove Class</button> |
Output
First paragraph with class ‘paraone’.
Second paragraph with class ‘paratwo’.
Third paragraph with class ‘parathree’.
Forth paragraph with class ‘parafore’.
Fifth paragraph with class ‘parafive’.
Sixth paragraph with class ‘parasix’.
When you click the button given above, it removes the specified class from the select multiple elements using the jQuery select multiple classes method.
You may also like to read