To select multiple classes using jQuery selectors; In this jQuery selector tutorial, you will learn how to select multiple css class and perform action in them using jQuery.
Multiple classes Selector By jQuery
There is ways to select multiple html elements using jQuery selectors.
- class selector
Syntax
$("class1");
Using the above syntax select for single class of elements.
$("class1, class2, class3, ...");
Using the above syntax select multiple html elements.
Paramaters of multiple classes selector
- class : This parameter is required to specify the html elements to be selected.
Example Of jQuery multiple classes selector
This example will demostrate you how to use multiple class selector from selected html elements.
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 Tutsmake.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>
In the following above example, When you click on button, that time it can select multiple class using jquery selector and also perform action in it. When you can click on click_me button that time, it will match the given class and perform action in it.
Output
Welcome to Tutsmake.com
Element with class1
Element with class1 and class2
Element with class2
jquery multiple class Selector Example 2
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multiple Classes from HTML Selected Element</title>
<style>
div, span {
width: 130px;
height: 50px;
float: left;
padding: 12px;
margin: 12px;
background-color: #EEEEEE;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="myclass">div class="Not here"</div>
<div class="myclass otherclass">Here is both class</div>
<span class="myclass otherclass">Here is both class</span>
<script>
$( ".myclass.otherclass" ).css( "border", "13px solid red" );
</script>
</body>
</html>
Output
In the above example second, You do not need to click any button, this jquery multiple class selector example, automatically perform action on window load event occurs.
