Jquery what is the difference between $(#id) and $([id=])

Question

I was a bit confused when I encountered this in my programm. So I was wondering if anyone knew what could be the deal here. I am fairly new to Jquery after all.

Why does:

$('[id="' + nameOftheID + '"]').append("Append some text");

work for me.

Yet

$("#" + nameOftheID).append("Append some text");

does not work for me. In this case the 'nameOftheID' is a var that is exactly the same as the ID of the span I am trying to append some text to (I tested and confirmed this in debugging). Why is it that the normal # selector for selection based on ID's does not append the text for me. but the other method does?

My code works in the end. I just want to know why A works and B doesnt.

The name of my ID is "Ruleset[0].Conditions[0]"

first one is the name value selector and second one is id selector. — Milind Anantwar, May 19 '14 at 09:18
Does the `nameOftheID` contain any special characters like `[]` If so you need to escape them. — Anton, May 19 '14 at 09:18
Yes it does contain characters like []. The ID is "Ruleset[0].Conditions[0]" as an . Could that interfere with the selector? — Leonard, May 19 '14 at 09:19
Yes that is why the second code doesn't work and the first does. — Anton, May 19 '14 at 09:20
Is it bad practice to have [ and ] in my ID's and should I remove it? Or it is okay to keep selecting on names instead of id's? — Leonard, May 19 '14 at 09:21
@Leonard: "*..Is it bad practice to have [ and ] in my ID's and should I remove it..*": Yes. — Abhitalks, May 19 '14 at 09:25

score 2 · Accepted Answer · answered May 19 '14 at 09:26

You have to use \\ for escape characters

#Ruleset\\[0\\]\.Conditions\\[0\\]

Below is the differnce for two selectors :

$("#" + nameOftheID).append("Append som text");

Above code is to select element by ID and here syntax is to use #.

And

$('[id="' + nameOftheID + '"]').append("Append some text");

This comes under attribute selector, where you can restrict the selection for specific tag like below

$('input[id="inputId"]').append("Append some text");// here it will check the id attribute of input tag only

Also, attribute selectors can be use to find elements with value start with some text like find input with id start with 'nameOf'

$('input[id^="nameOf"]').append("Append some text");

Hence attribute selectors can be used for get elements with more filtering or for more precise selections. Please find more on selectors here.

score 1 · Answer 2 · answered May 19 '14 at 09:21

The ID is Ruleset[0].Conditions[0] as an example

Your ID contains characters with special meaning in a selector.

If you just prefix that with a # then the [ will start an attribute selector and the . will start a class selector. You have to escape characters with special meaning in a selector if you use them in an id selector.

#Ruleset\[0\]\.Conditions\[0\]

Note that you must include the selector escape characters in the string and that \ is an escape character for JavaScript string literals (which will require escaping itself in order to make \ part of the string).

Those characters don't have special meaning inside a quoted attribute selector.

I prefer to avoid the problem by keeping characters with special meaning out of id values in the first place.

2

You need double \\ to escape – Anton May 19 '14 at 09:22

gog · Answer 3 · 2014-05-19T09:33:49.977

My code works in the end. I just want to know why A works and B doesnt.

Sizzle (the part of jQuery that handles $(...) things) assumes an ID to be the following:

"(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+"

That is, an escaped character, or a word char, or an ASCII char higher than \xA0. That excludes all punctuation and regex metacharacters like [. So when you something like #foo[] to the $ function, it won't be recognized and throw the error:

Uncaught Error: Syntax error, unrecognized expression: #foo[]

The attribute selector, on the other side, only requires a quoted string and doesn't care about its content.

score 0 · Answer 4 · answered May 19 '14 at 09:28

As i see in the comments section that your span's id holds some special chars like [] brackets:

This code

$('[id="' + nameOftheID + '"]')

represents like this:

$('[id="Ruleset[0].Conditions[0]"]') // works because of string representation.

This represents the id as a string so it works but for the other one this is not the case, for that id representation you have to escape your special chars with double slashes \\

Jquery what is the difference between $(#id) and $([id=])

4 Answers4

Linked