Multiple Elements
By using “selector1, selector2,” you are enquiring about a jQuery Multiple Elements Selector, sometimes referred to as a Group Selector. With this kind of selection, you can choose elements that correspond to any of the individual selectors listed. The Multiple Elements selection creates a single set from the output of multiple provided selectors. This helps you avoid writing separate code for each type of element on your page by applying the same operation or styling to all of them. Working with sets of elements is encouraged by jQuery’s design, which eliminates the need for explicit loops by having functions run immediately on all matching components.
What it is
The purpose of a multiple elements selector is to enable you to integrate multiple separate selectors into a single query. Say “Find me all elements that match selector1 OR selector2 OR selector3, and so on” . “Find me all elements that match selector1 OR selector2 OR selector3, and so on” is essentially what a multiple elements selector does, allowing you to combine several distinct selects into a single query. This selector’s main function is to allow you to combine several different selection criteria into a single query.
Syntax:
$("selector1, selector2, selector3, ...").action();This list of selections is separated by commas, and you can provide an arbitrary number of them.
How it works
JQuery must aggregate all components that meet the criteria for multiple element selections. For example, pick all and components on the page with $(‘div, p’). These matching components can be found using $(), short for jQuery(). Choosing and modifying HTML components on a webpage is made easier with jQuery. All components that satisfy the given criteria are aggregated by jQuery when a multiple element selector such as $(‘div, p’) is used. The $() function, a shorthand notation or alias for the jQuery() function, is used to accomplish this.
The $(selector).$ defines or accesses jQuery, the (selector) queries (or finds) HTML elements, and the action() is executed on the element(s). This is the core framework of jQuery’s action() syntax. As a factory, the $( ) function returns a new instance of a jQuery object that contains the zero or more DOM elements that the selector has found. Because most jQuery methods automatically function on sets of objects a concept known as implicit iteration this object makes it simple to interact with the components and can significantly reduce code length.
Code Example:
Take a look at the HTML structure below:
<html>
<head>
<title>The Selector Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
// This line uses the Multiple Elements Selector
// It selects all elements with the class "big" AND the element with the ID "div3"
// and then applies a yellow background color to them.
$(".big, #div3").css("background-color", "yellow");
});
</script>
<style>
.big { font-weight: bold; }
</style>
</head>
<body>
<div class="big" id="div1">
<p>This is first division of the DOM.</p>
</div>
<div class="medium" id="div2">
<p>This is second division of the DOM.</p>
</div>
<div class="small" id="div3">
<p>This is third division of the DOM</p>
</div>
</body>
</html>Output:
This is first division of the DOM.
This is second division of the DOM.
This is third division of the DOMIn this example:
- The Selector for Multiple Elements is $(“.big, #div3”).
- In this scenario, “.big” picks any element with the class big, which is div1.
- Selecting the element with the ID div3 is done with “#div3”.
- Both div1 and div3 are thus given a yellow background via the.css(“background-color”, “yellow”) method as the combined selector matched them both.
Conclusion
This illustrates how a single jQuery statement can group various selection types together to impact multiple components on your page. You can use selectors 1 and 2 to apply the same action to different kinds of components. This keeps your code clean and saves time. When you wish to apply the same effect to several HTML elements simultaneously, it’s helpful.