Multiple variables in jquery selector

Question

I have a code like this

$(".class1 .class2").on('click', function(){
 //Do something        
});

I am trying to somehting like this using variables:

var1=".class1";
var2=".class2"

$(var1 var2).on('click', function(){
   //Do something        
});

I see var1 and var2 are set to right values, but everytime I try to use 2 variables as selector it fails. When I keep the click trigger unchanged and use var1 or var2 elsewhere in the code individually (just var1 or var2 but not in the same selector list) it works. Any tips?

I figure I use var3 concatenate var1 and var2, but I am trying to reduce another variable.

Variables are cheap. var1 var2 is not a list, it is a syntax error.... and even if it were a list, that list would be an object. Perhaps what you don't want is to pollute the name space, in that case, just do the concatenation inline as adeneo suggests. — Theraot
– Theraot, Commented Oct 18, 2016 at 18:38

Zack · Accepted Answer · 2016-10-18 18:50:31Z

4

Another option would be to use jQuery objects as your variables. This would avoid having to declare a third variable, which is pretty trivial to do, but if you really want to, there is a way.

This is assuming you are trying to apply the function to any element that has either class, which is not what your existing code example shows ($(".class1 .class2").on) , but to me it seems like this is what you are actually asking for.

var var1 = $('.clickable');
var var2 = $('.anotherClass');

var1.add(var2).on('click', function() {
  console.log('button clicked!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clickable">Click 1</button>
<button class="anotherClass">Click 2</button>

answered Oct 18, 2016 at 18:50

Zack

2,8791 gold badge36 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

isherwood · Accepted Answer · 2023-01-12 21:46:50Z

3

You're missing the space. Without it, it becomes .class1.class2 which means the element has to have both classes, not get the descendant of the first one, etc.

var1 = ".class1";
var2 = ".class2";

$(var1 + ' ' + var2).on('click', function(){
   //Do something        
});

Another option would be find()

$(var1).find(var2).on(...

Just doing $(var1 var2) would be the same as var fail = var1 var2; it's a syntax error.

edited Jan 12, 2023 at 21:46

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Oct 18, 2016 at 18:31

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Jeff McCloud · Accepted Answer · 2016-10-18 18:46:44Z

2

Your sample code has a JavaScript syntax error (there should be a plus sign between var1 and var2, if you intend to concatenate them). However, this would produce a selector ".class1.class2" which is not what you're looking for - this would find an element that has both classes, rather than elements that have either class1 or class2.

So, firstly, you need a plus sign to fix your syntax error. But then you'll need a comma between your class names to select the correct elements.

var1=".class1";
var2=".class2"

// Select ".class1,.class2" (either class1 or class2)
$(var1 + ',' + var2).on('click', function(){
   //Do something        
});

edited Oct 18, 2016 at 18:46

answered Oct 18, 2016 at 18:45

Jeff McCloud

5,9671 gold badge22 silver badges21 bronze badges

2 Comments

adeneo Over a year ago

Why should there be a comma, where there once was a space ?

Jeff McCloud Over a year ago

Good point... I've re-read it a few times now, and I still can't tell he intended the space to begin with. He never clearly says he wants a descendant element and I somehow read that he wants either class1 or class2. Perhaps I'm wrong. I'll leave my answer as is, just in case, since you've already supplied the correct answer if he wanted the space.

Collectives™ on Stack Overflow

Multiple variables in jquery selector

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related