jQuery Multiple Element Selector

jQuery | Multiple Element Selector: Learn about the jQuery Multiple Element Selector with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on November 03, 2022

Multiple Element Selector

In jQuery, selectors are a parameter through which we can select the HTML element. Selectors can comprise – class names, ids, tag names, attributes, etc. Basically, by using selectors, the appropriate HTML-DOM element can be selected and hence performed actions on it. Here, we are discussing the jQuery multiple-element selector.

The jQuery element selector helps to select the element through its element names, i.e., HTML tag names - <p>, <div>, <h2>, etc.

Therefore, when we need to select all the similar tag elements on the document, we use multiple element selectors. Unlike the class selector and id selector, the element selector does not need any extra special sign to prepend it with. Only the name of the element says div for an <div> element will be passed to access it.

To select multiple elements with their tag names all at once, we can pass different element names altogether with a comma between them.

Multiple Element Selector Syntax

$('element_name_1, element_name_2, element_name_3, ...');

Once the element is selected, you can access those and perform the actions that you want to perform on them. The example given below shows the selection of all the elements on click by passing the appropriate tag names.

jQuery Multiple Element Selector Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
    <style>
      .color{
      color: darkblue;
      font-size: large;
      font-weight: bold;
      }
    </style>
  </head>
  
  <body>
    <h2>jQuery - Multiple Element Selector</h2>
    <p>Click the button to Select the multiple elements with the help of their tag names.</p>
    <button>Multiple Element Selector</button>
    <hr>
    <div>
      <div class="color" id="one">Welcome to <span>Include Help !</span></div>
      <p id="two">This is a jQuery Tutorial for Selectors.</p>
      <div class="color" id="three">Thanks for visiting !</div>
    </div>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('p, span').css('color','red');
            $('h2, div').css('color','Green');
        });
    });
  </script>
</html>

Output:

Example 1: jQuery Multiple Element Selector

jQuery Element Selector

jQuery Multiple .Class Selector

Comments and Discussions!

Load comments ↻