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:

Support and Contributions

Need help with Multiple Selector (“selector1, selector2, selectorN”) or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to Multiple Selector (“selector1, selector2, selectorN”)? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

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 = /^[^<]*(<[wW]+>)[^>]*$|^#([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);

Felipe alcacibar

the OR equivalent in css is the , selector operator

shashank

What if we want to select multiple child items of a parent. Which one should we use:
1. $(“span.not_body>div, span.not_body>p”)
2. $(“span.not_body>div &7 span.not_body>p”)

http://twitter.com/mattejames Matt James

I really wish that the multiple selector would return the elements in the same order that they appear in the DOM. For example:

$(“input[type='submit'], .submit-button”);

This should still return the items in the order that they're found so that the first element matching either one of these should be pushed into the results, then the second. Ie, if the HTML was this:

<input class=”submit-button” type=”button”><input type=”submit”>

The code should return them in that order despite the order of the selectors.
Lucas Dias Gabriel

I have a question: Is there a way to use the multiple selectors to, instead of retreiving disparate elements, to use the multiple selectors as filters? ( For example: using one selector to retrieve all itens that are inputs and inside those results return all inputs that are of a given class)
Lucas Dias Gabriel

I have a question: Is there a way to use the multiple selectors to, instead of retreiving disparate elements, to use the multiple selectors as filters? ( For example: using one selector to retrieve all itens that are inputs and inside those results return all inputs that are of a given class)
Lucas Dias Gabriel

I have a question: Is there a way to use the multiple selectors to, instead of retreiving disparate elements, to use the multiple selectors as filters? ( For example: using one selector to retrieve all itens that are inputs and inside those results return all inputs that are of a given class)
Lucas Dias Gabriel

I have a question: Is there a way to use the multiple selectors to, instead of retreiving disparate elements, to use the multiple selectors as filters? ( For example: using one selector to retrieve all itens that are inputs and inside those results return all inputs that are of a given class)
Mad

Hi!

It's possible to join this two?

$(this).animate({bottom: '+=10'});
$(this).next(“label”).animate({bottom: '+=10'});

in something like this:

$($(this),$(this).next(“label”)).animate({bottom: '+=10'}); //OBVIOUSLY NOT WORK!

I want to start animation at the same time without create a new div…

Mad

I did it:
$(this).parent().find(“span,label”).animate({bottom: '+=10'});

=D

http://twitter.com/hasis Hamid Raza

hello
var elem1 = $('#div1');
var elem2 = $('#div2');
var elem3 = $('#div3');

how will u apply hover effect on these three divs using the variables…?

i know i can apply the hover effect with $('#div1, #div2, #div3').hover();

but i want to apply the hover like elem1.hover(). on all the three divs in one line.
Steeler

why this does not work?

$j(“.inp_txt,.tld_chrome”).blur(function() {
var val = $j('.inp_txt').val();
if (!val) {
$j('.inp_txt').width(266)
$j('.inp_txt').css('text-align','left')
$j('.inp_txt').val(this.defaultValue);
$j('.tld_chrome').hide()
}
});
I've though that selector $j(“.inp_txt & .tld_chrome”).blur should work, but it doesn't.

jQuery API

Multiple Selector (“selector1, selector2, selectorN”)