CODEWITHSUNDEEP
jqueryvariablesdomobject
jaypea07
jaypea07

Reputation: 53

Using variables when referencing DOM jQuery DOM objects

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.

Upvotes: 2

Views: 4931

Answers (6)

pliashkou
pliashkou

Reputation: 4130

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

Upvotes: 0

VBH
VBH

Reputation: 9

jaypea,

  1. 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');

  2. 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

Upvotes: 0

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 67131

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

. // class selector

# // ID selector

Upvotes: 3

Guffa
Guffa

Reputation: 700562

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/

Upvotes: 0

Phillip Schmidt
Phillip Schmidt

Reputation: 8818

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.

Upvotes: 0

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

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

Upvotes: 0

Related Questions