$（“'” + foo +“'”）与$（foo）

Question

I have some code that has been working since it's beginning, well over a two months. The selectors had dynamic content, stored in the variable newClasses . My code used to be $("'" + newClasses + "'") , and about a two days ago, after I added separate functionality on the page, not effecting this code, and not importing any libraries or anything else, I got the error of

Uncaught Error: Syntax error, unrecognized expression: '.fs.btn.heading.abstract' code.jquery.com/jquery.min.js:2

AFTER a day of troubleshooting, I found that if i removed the "'" + and + "'" , and it became $(newClasses) , the functionality started working again. FYI: the variable newClasses did not include ' s on either end of the string.

Now, I know this is somewhat of a different question, but what code could be added in a separate section to effect the functionality, and result in my having to remove the concatenation of the single quotes?

Notes -

• I am not looking for code help to the webpage, more troubleshooting methodology and thinking answers.
• due to the volume of code, and the different code that was added, it is pointless to post the code, but you can feel free to review the Git code here
• I even tried reverting to a prior commit, and for some reason, it still had the same error.
• I have deduced from my programming sessions that when the console refers to JS or JQuery on a low level line number (2 in this case), it usually has something to do with a trivial ; , ) , or } , but JSLint didn't show up that particular anomaly.
• no browser change since then, but I did reboot, and potentially had system updates waiting to finish.

Is it possible that the API of jQuery changed? something else that I'm not thinking of? Your suggestions as to possible culprits is appreciated.

Answer 1

The selector is just a string. If your variable is already a string type, then you don't need to add quotes to each end and doing so will probably cause an error as there are not supposed to be quotes on each end of the string. So, $(var) should work just fine.

Quotes are used to declare a string literal like:

"#test"

but are not needed if you already have the data in a variable. So, if you have a variable called sel that already contains the string #test , then you can just do:

$(sel)

The only time you might add quotes into a selector string is if you need quotes embedded into the middle of the string such as this selector:

[data-myval='whatever']

Answer 2

I don't know you ever used $("'" + newClasses + "'") in the first place. Why are you adding ' before and after the string?

That is like doing $("'.fs.btn.heading.abstract'") . Which I can't see why you would have ever done.

The only time quotes are needed inside a jQuery selector is when you are using an attribute selector like: $('input[id="test.input"]') .

Answer 3

It is impossible you managed to make that code to work, the only possible explanation is that the code was never executed prior to adding that function.

What it is basically doing is:

var id= "#idname"; //#idname
var str = "'" + id + "'"; //'#idname'
$(str); //equivalent to $("'#idname'"); which is wrong

Remember that when you see "hello" , the string is holding only hello , the quotes are not part of the string