Select Multiple Classes Using jQuery Selectors

How to select multiple classes and how to perform action on the dom using jquery api? In this jQuery Tutorial, You will learn how to select multiple css class and perform action in it using jQuery. Or In jQuery How To Select an Element with Multiple class.

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

jQuery Multiple Class from HTML Selected Element

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

jQuery Multiple Class from HTML Selected Element
div class=”Not here”
Here is both class
Here is both class

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.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *