Selecting multiple classes with jQuery; Through this tutorial, i am going to show you how to select multiple classes and how to perform action on the dom html element using jquery.

Select Multiple classes in jQuery

To select multiple classes from html elements using jQuery class selectors.

Syntax jQuery Multiple Element Selector

$("class1");

Using the above syntax select for single class of elements.

$("class1, class2, class3, ...");

Using the above syntax select multiple html elements.

Paramaters of jQuery Multiple Element Selector

class : This parameter is required to specify the html elements to be selected.

Example – How to Select Multiple Classes in jQuery

If you want to target the selected HTML elements with the names of multiple classes, such as selecting elements, if it matches both class1 and class2, then it will be excused with multiple classes.

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Class Multiple Selector</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script> 
    $(document).ready(function() {
       $(".class_selector").click(function(){    
         $(".class1.class2").css("background-color", "green"); 
       });
    }); 
</script> 
</head> 
<body> 
<center> 
    <h1 style="margin-top: 10px;">Welcome to LaraTutorials.com</h1> 
    <p class="class1">Element with class1</p>
    <p class="class1 class2">Element with class1 and class2</p>
    <p class="class1">Element with class2</p>
    <button type="button" class="class_selector">Click Me!</button>
</center> 
</body> 
</html>

Demo for how to Select Multiple Classes in jQuery

jQuery Class Multiple Selector

Welcome to LaraTutorials.com

Element with class1

Element with class1 and class2

Element with class2

jQuery Select Multiple Classes