Updated March 29, 2023
Introduction to jQuery Multiple Selectors
The jQuery UI multiple selectors is used to selects the combined results of all the specified selectors. The jQuery multiple selectors is a good way that allows select multiple elements in a single jQuery, where the comma separates each selector or element. This is an efficient way to combine multiple expressions and to get the combined result of disparate elements. The order of DOM elements in the return result of multiple selector objects may not be the same because they will be in document order. The multiple selectors select multiple html elements that can be based on their name, id, class, etc., and then we can apply common behavior to them. To select one element, then specify the css selector to $(), for example, $(“p”) selects all the p elements in the document and to select multiple elements matching one or more selectors then specify as $(“selector1, selector2, …”), for example, $(“p, div, span”) selects all the p, div and span elements in the document. An alternative to this method is the jQuery add() method.
Syntax
The syntax of the jQuery UI multiple selectors –
Here is the simple syntax to use the multiple selectors is
$( "selector1, selector2, … selectorN ")it is used to select multiple html elements in the document.
- Parameters
Selector – this parameter specifies the element to be select.
The return value of this method is the same as any other jQuery selector; it returns an array filled with the found elements.
Examples of jQuery UI multiple selectors
Next, we write the html code to understand the jQuery multiple selectors more clearly with the following example, where the multiple selectors used to select the elements based on their name, as below –
Example #1
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI multiple selectors </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p, div").css("background-color", "red");
});
</script>
</head>
<body>
<p class = "p1">This is the first p element of the DOM.</p>
<p class = "p2">This is the second p element of the DOM.</p>
<span class = "span1">This is the first span element of the DOM.<p class = "p1">This is the third p element of the DOM.
</p> </span>
<div class = "div1">This is the first div element of the DOM.</div>
</body>
</html>
Output:
As in the above program the multiple elements (p and div) are selected by their name through the line of code $(“p, div”).css(“background-color”, “red”); and apply some style to them.
Next, we rewrite the above html code to understand the jQuery multiple selectors more clearly with the following example, where the multiple selectors will use to select the elements based on their class, as below –
Example #2
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<title>This is an example for jQuery UI multiple selectors </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".p2, .div1, .span1").css( "background-color", "red" );
});
</script>
</head>
<body>
<p class = "p1">This is the first p element of the DOM.</p>
<p class = "p2">This is the second p element of the DOM.</p>
<span class = "span1">This is the first span element of the DOM. <p class = "p1">This is the third p element of the DOM. </p> </span>
<p class = "p1">This is the fourth p element of the DOM. <span class = "span2">This is the second span element of the DOM. </span> </p>
<div class = "div1">This is the first div element of the DOM. </div>
</body>
</html>Output:
As in the above program the multiple elements(p, div and span) are selected by their class through the line of code “$(“.p2, .div1, .span1”).css( “background-color”, “red” );” and apply some style to them.
Next, we rewrite the above html code to understand the jQuery multiple selectors more clearly with the following example, where the multiple selectors will be used to select the elements based on their id, as below –
Example #3
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<title>This is an example for jQuery UI multiple selectors </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#pid1, #divid1, #spanid1").css( "background-color", "red" );
});
</script>
</head>
<body>
<p class = "p1" id = "pid1">This is the first p element of the DOM.</p>
<p class = "p2" id = "pid2">This is the second p element of the DOM.</p>
<span class = "span1" id = "spanid1">This is the first span element of the DOM. <p class = "p1" id = "pid1">This is the third p element of the DOM. </p> </span>
<p class = "p2" id = "pid2">This is the fourth p element of the DOM. <span class = "span2" id = "spanid2">This is the second span element of the DOM. </span> </p>
<div class = "div1" id = "divid1">This is the first div element of the DOM. </div>
</body>
</html>Output:
As in the above program the multiple elements(p, div and span) are selected by their id through the line of code $(“#pid1, #divid1, #spanid1”).css( “background-color”, “red” );” and apply some style to them.
Next, we rewrite the above html code to understand the jQuery multiple selectors more clearly with the following example, where the multiple selectors will be used to select the elements based on their name, class, and id, as below.
Example #4
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<title>This is an example for jQuery UI multiple selectors </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p, .div1, #spanid1").css( "background-color", "red" );
});
</script>
</head>
<body>
<p class = "p1" id = "pid1">This is the first p element of the DOM.</p>
<p class = "p2" id = "pid2">This is the second p element of the DOM.</p>
<span class = "span1" id = "spanid1">This is the first span element of the DOM. <p class = "p1" id = "pid1">This is the third p element of the DOM. </p> </span>
<p class = "p2" id = "pid2">This is the fourth p element of the DOM. <span class = "span2" id = "spanid2">This is the second span element of the DOM. </span> </p>
<div class = "div1" id = "divid1">This is the first div element of the DOM. </div>
</body>
</html>Output:
Conclusion
The multiple selectors select the multiple html elements in a single jQuery. The comma separates each selector or element, the selector can be select based on their name, id, class, etc., and then we can apply common behavior to all selectors.
Recommended Articles
This is a guide to jQuery Multiple Selectors. Here we discuss the Examples for the jQuery UI, multiple selectors, along with the codes and outputs. You may also have a look at the following articles to learn more –
