JQuery on multiple objects

Question

if we have something like this:

var foo=$('.foo');
var boo=$('.boo');
var koo=$('.koo');

Then is there any possibility to put foo,boo and koo in one JQuery object with $ function ?

I Tried these:

$(foo,koo,boo).removeClass('someClass'); // nothing happened
$([foo,koo,boo]).removeClass('someClass'); // nothing happened

But nothing happend.

PS. I know I can use direct selector with $('.foo,.boo,.koo') but this is not what I'm looking for

Answer 1

You can select multiple elements like so:

$(".foo, .boo, .koo").removeClass('someClass');

This is called a multiple selector, as documented on https://api.jquery.com/multiple-selector/

If you want to store them in a variable, you have to use the add method as such

var elements = $(".foo").add(".koo").add(".boo");

See: http://api.jquery.com/add/

Answer 2

If you already have several jQuery objects, you can use $.add():

var combo = foo.add(koo).add(boo)
combo.removeClass('someClass')

Answer 3

You can directly add multiple selectors with comma separated as below

$('.foo,.koo,.boo').removeClass('someClass');

Edit 1: After the edit in question, If you want to do this on the object level then try below.

  $.each([foo,koo,boo],function(i,v){
   v.removeClass('someClass');
  });

Answer 4

You can mix and match selectors like the following:

$('#someId, .foo, .boo').removeClass('someClass');