jQuery API

Multiple Selector (“selector1, selector2, selectorN”)

Categories: Selectors > Basic

multiple selector

version added: 1.0jQuery('selector1, selector2, selectorN')

  • selector1
    Any valid selector.
    selector2
    Another valid selector.
    selectorN
    As many more valid selectors as you like.

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

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: Finds the elements that match any of these three selectors. 

<!DOCTYPE html>
<html>
<head>
  <style>

  div,span,p {
    width: 126px;
    height: 60px;
    float:left;
    padding: 3px;
    margin: 2px;
    background-color: #EEEEEE;
    font-size:14px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.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: Show the order in the jQuery object. 

<!DOCTYPE html>
<html>
<head>
  <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="http://code.jquery.com/jquery-latest.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:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for Multiple Selector (“selector1, selector2, selectorN”) below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • Ondrej
    Here is an idea: an OR selector divider:
    $("selector1 || selector2 || selector1")

    the expected behavior is: selector1 is executed; if it returns 0 results, selector2 is executed and so on; once a selector returns a result, no further selectors are executed.

    This could allow easy distribution of events and behaviors on current DOM condition.
  • Ondrej
    OK. Here is functional hack to get the OR selector working on top of jQuery. (It works, though it's not pretty)

    $ = function(selector, context ){
    if(selector && typeof selector == "string" && selector.indexOf(" || ") > 0){
    var sel = selector.split(" || ");
    var length =sel.length;
    var res = $();
    for(var i=0; i < length; i++){
    res = new jQuery.fn.init( sel[i], context );
    if(res.size() > 0) return res;
    }
    return res;
    }else{
    return new jQuery.fn.init( selector, context );
    }
    }
    jQuery.extend($, jQuery);
  • Ondrej
    sorry. the previous code failed on $(html)
    so a little copy and paste from jQuery lib to test html

    $ = function(selector, context ){
    var quickExpr = /^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/;
    var match = quickExpr.exec(selector);
    if(selector && typeof selector == "string" && selector.indexOf(" || ") > 0 && !(match && (match[1] || !context))){
    var sel = selector.split(" || ");
    var length =sel.length;
    var res = jQuery();
    for(var i=0; i < length; i++){
    res = new jQuery.fn.init( sel[i], context );
    if(res.size() > 0) return res;
    }
    return res;
    }
    return new jQuery.fn.init( selector, context );
    }
    jQuery.extend($, jQuery);