How to Select Multiple Classes in jQuery

Habdul Hazeez Feb 02, 2024
  1. Select Multiple Classes in jQuery: The Class Intersection Approach
  2. Select Multiple Classes in jQuery: Use the filter() Function
How to Select Multiple Classes in jQuery

This article teaches you two methods that will select multiple classes in jQuery. Both methods will match elements that have the classes, but they do it differently.

Besides, when you include performance, one is faster than the other.

Select Multiple Classes in jQuery: The Class Intersection Approach

You can select multiple classes in jQuery using a class intersection approach. This is where you use the jQuery selector to grab the classes without spaces between them.

What’s more, the order that you write the classes does not matter. In the following code, we have an HTML element with two classes; class-1 and class-2.

Afterward, we grab both classes using the class intersection approach. You can do what you want; we have changed the font size here.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>01-jQuery-select-multiple-classes</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <main>
       <div class="class-1 class-2">
           <p>I am a random text.</p>
       </div>
    </main>
    <script>
    	$('.class-1.class-2').css("font-size", "3em")
    </script>
</body>
</html>

Output:

Select multiple classes with jQuery

Select Multiple Classes in jQuery: Use the filter() Function

If an element has two classes, for example, class-a and class-b, you can use the filter() function to select it. First, you’ll grab class-a using the jQuery selector, then use the filter() function to select class-b.

This way, jQuery will select all elements with class-a and remove all except those with class-b.

The result is elements with class-a and class-b; that’s what we’ve done in the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-select-multiple-classes</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <main>
       <div class="class-a class-b">
           <p>Hello World</p>
       </div>
    </main>
    <script>
    	$('.class-a.class-b').css("padding", "3em")
    </script>
</body>
</html>

Output:

Select multiple classes in jQuery using the filter() function

Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

Related Article - jQuery Class