Multiple Selector (“selector1, selector2, selectorN”) | jQuery API Documentation

Multiple Selector (“selector1, selector2, selectorN”)

Categories: Selectors > Basic

multiple selector

Description: Selects the combined results of all the specified selectors.

  • version added: 1.0jQuery( "selector1, selector2, selectorN" )

    selector1: Any valid selector.

    selector2: Another valid selector.

    selectorN: As many more valid selectors as you like.

You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order. An alternative to this combinator is the .add() method.

Examples:

Example 1



Finds the elements that match any of these three selectors.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>multiple demo</title>
  <style>
  div, span, p {
    width: 126px;
    height: 60px;
    float: left;
    padding: 3px;
    margin: 2px;
    background-color: #eee;
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
 
<script>
$( "div, span, p.myClass" ).css( "border", "3px solid red" );
</script>
 
</body>
</html>

Demo:

Example 2

Show the order in the jQuery object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>multiple demo</title>
  <style>
  b {
    color: red;
    font-size: 16px;
    display: block;
    clear:left;
  }
  div, span, p {
    width: 40px;
    height: 40px;
    float: left;
    margin: 10px;
    background-color: blue;
    padding: 3px;
    color: white;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<span>span</span>
<p>p</p>
<p>p</p>
<div>div</div>
<span>span</span>
<p>p</p>
<div>div</div>
<b></b>
 
<script>
var list = $( "div, p, span" )
  .map( function() {
    return this.tagName;
  })
  .get()
  .join( ", " );
$( "b" ).append( document.createTextNode( list ) );
</script>
 
</body>
</html>

Demo: