Using variables when referencing DOM jQuery DOM objects

Question

I'm trying to understand why you can't construct a jQuery DOM object with a string and variable (even if the variable is also a string).

//Works
var test1 = $('#test');
test1.addClass('success');

//Works
var test2 = '#test';
$(test2).addClass('success');

//Fails
var test3 = 'test';
$('.' + test3).addClass('success');

//Fails
var id = 'test';
var test4 = '.' + id;
$(test4).addClass('success');

Here's a jsFiddle to demonstrate.

I feel like I'm probably missing something basic, but I can't find anything in the jQuery documentation about this.

EDIT: Doh, I should have noticed I used the wrong selectors in the example. I selected mcpDESIGNS' answer since it did indeed fix my jsFiddle. However, I was still getting an error in my code. ("Uncaught Exception: Syntax error, unrecognized expression: .") Here's what was going on in case anyone's interested:

I was trying to take the current hash in the URL, save the string as a variable, use that to construct a jQuery DOM object, and pass that object into a function.

var hashTag = window.location.hash;
hashTag = hashTag.substr(1);

currentObject = $('.'+hashTag);
setSpriteX(currentObject);

I figured out that I wasn't accounting for when there wasn't a hash in the URL. All I needed to do was add hashTag = 'defaulthash'; before I set currentObject.

You're using . instead of #, . would be referencing a class. Am I missing something? Your DOM has no classes. — user400654
– user400654, Commented Sep 4, 2012 at 19:38
And in case it's not obvious yet, jQuery has no way to distinguish whether your selector is a bare string or a string variable. — Álvaro González
– Álvaro González, Commented Sep 4, 2012 at 19:40

Mark Pieszak - Trilon.io · Accepted Answer · 2012-09-04 19:43:00Z

3

You need to have $('#' + test3) and var test4 = '#' + id; since you are trying to select by ID's not classes.

. // class selector

# // ID selector

edited Sep 4, 2012 at 19:43

answered Sep 4, 2012 at 19:37

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

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

Comments

Konstantin Dinev · Accepted Answer · 2012-09-04 19:37:49Z

0

The '.' selector is by class while the ones above are by ID. Change '.' to '#'.

answered Sep 4, 2012 at 19:37

Konstantin Dinev

35k14 gold badges79 silver badges103 bronze badges

Comments

Phillip Schmidt · Accepted Answer · 2012-09-04 19:38:09Z

0

You're doing everything right as far as jQuery syntax goes. Your problem is that the . selector is for classes, not ID's. Use # and you should be good.

answered Sep 4, 2012 at 19:38

Phillip Schmidt

8,8283 gold badges45 silver badges67 bronze badges

Comments

Guffa · Accepted Answer · 2012-09-04 19:39:11Z

0

You are using a period instead of #. It's an id, not a class.

//Fails no more
var test3 = 'test3';
$('#' + test3).addClass('success');

//Fails no more
var id = 'test4';
var test4 = '#' + id;
$(test4).addClass('success');

http://jsfiddle.net/Guffa/QeWLu/2/

answered Sep 4, 2012 at 19:39

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

VBH · Accepted Answer · 2012-09-04 19:47:00Z

jaypea,

This is a Best Method and you have to Follow, because of Cached Object is using to addClass

//Works var test1 = $('#test');

test1.addClass('success');
This will also works, But Performance is Down Compared to First Method Because No caching the object. Not Preferabble

//Works
var test2 = '#test';

$(test2).addClass('success');

3.This will not work because you are selecting elements based on class not on ID

   //Fails
   var test3 = 'test';
   $('.' + test3).addClass('success');

Same Mistake Did in Previous, You are using Class Name Based Selector

//Fails
var id = 'test';
var test4 = '.' + id;
$(test4).addClass('success');

For More Details Check Best Practices in Jquery in Stackoverflow

pliashkou · Accepted Answer · 2012-09-04 19:48:29Z

0

You have only id's in your jsFiddle code, but trying toselect them by class

answered Sep 4, 2012 at 19:48

pliashkou

4,1302 gold badges33 silver badges40 bronze badges

Collectives™ on Stack Overflow

Using variables when referencing DOM jQuery DOM objects

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related