• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / jQuery / Using jQuery to Select Multiple Classes

Using jQuery to Select Multiple Classes

April 19, 2022 Leave a Comment

We can use jQuery to select multiple classes of an HTML element by simply separating each class by a comma. Take a look at how we do this in the code below:

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

Let’s see a quick example of this.


Let’s say I have the following HTML:

<div id="div1">
  <p class="class1">This is a paragraph.</p>
  <div class="class2">This is a div.</div>
  <p class="class3">This is a paragraph.</p>
  <div class="class4">This is a div.</div>
</div>

If we wanted to add some style to all of the divs and paragraphs in the div, #div1, we could select all of these classes and then change the styles of them all at once. Here is the jQuery code that we would need:

$(".class1, .class2, .class3, .class4").css("background","green");

The code above would change the background color of each element in #div1 to green.

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery(".class1, .class2, .class3, .class4").css("background","green");

Example of Using jQuery to Select Multiple Classes

In this example, we will let the user click a button that will change the styles of some divs and paragraphs as we did in the example above.

Here is the HTML setup:

<div id="div1">
  <p class="class1">This is a paragraph.</p>
  <div class="class2">This is a div.</div>
  <p class="class3">This is a paragraph.</p>
  <div class="class4">This is a div.</div>
  <div id="click-me">Change font size</div>
</div>

We can utilize both the jQuery click() method and jQuery css() method to add some styles to the elements in div #div1.

We can do this all at once by using jQuery to select multiple classes as we showed above.

In this example, we will simply change the font size of the elements.

Below is the JavaScript and jQuery code we need to do this:

$("#click-me").click(function(){
  $(".class1, .class2, .class3, .class4").css("font-size","24px");
});

The final code and output for this example of how to select multiple classes using jQuery and JavaScript is below:

Code Output:

This is a paragraph.

This is a div.

This is a paragraph.

This is a div.

Change font size

Full Code:

<div id="div1">
  <p class="class1">This is a paragraph.</p>
  <div class="class2">This is a div.</div>
  <p class="class3">This is a paragraph.</p>
  <div class="class4">This is a div.</div>
  <div id="click-me">Change font size</div>
</div>

<script>

$("#click-me").click(function(){
  $(".class1, .class2, .class3, .class4").css("font-size","24px");
});

</script>

Hopefully this article has been useful for you to understand how to use jQuery to select multiple classes.

Other Articles You'll Also Like:

  • 1.  Using jQuery to Change the Font Size of a Paragraph
  • 2.  Using jQuery to Add id to div
  • 3.  jQuery Opacity – How to Change the Opacity of an Element
  • 4.  jQuery Get Last Child
  • 5.  Using jQuery to Get Value of Select On Change
  • 6.  jQuery Random Number Generator Between Two Numbers
  • 7.  Using jQuery to Append Text to textarea Field
  • 8.  jQuery contains – How to Check if a Paragraph Contains Specific Text
  • 9.  Using jQuery to Move Element After Another
  • 10.  jQuery appendTo – Insert Element As Last Child

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy