jQuery Select Multiple Classes Using Selectors

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

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.

Recommended jQuery Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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