Why doesn't this jquery selector with a period

问题:

I have a div with an ID

<div id="updates-pane-user.followed_on">

this jquery selector works

$("[id^='updates-pane']")

but this doesn't

$("#updates-pane-user.followed_on")

I don't see what is wrong.. id names can include periods right? Am I missing something obvious?

回答1:

In the latter selector, . is used to denote a class. So it's looking for the .followed_on class, which it obviously doesn't find and so nothing is matched.

In order to fix this, I think you should escape the dot with a double-backslash:

$("#updates-pane-user\\.followed_on")

According to the jQuery docs:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").

In general, try not to use periods or other special characters in your IDs to avoid confusion all around. "Allowed" is not the same as "good practice."

回答2:

Yes, HTML5 allows period in id but jQuery isn't built by the w3 org. It's just a utility library optimized for the most common cases.

If your ID has a period, or any other character making jQuery parse it as more than just an id, then you'd better use the standard function :

$(document.getElementById(yourId))

This is the preferred solution if your id comes from a variable.

回答3:

$("#updates-pane-user\\.followed_on") - This Should work as per the Jquery documentation

// Does not work
 $("#some:id")

 // Works!
 $("#some\\:id")

 // Does not work
 $("#some.id")

 // Works!
 $("#some\\.id")

回答4:

Because of the dot in the id attribute which in jQuery syntax represents class selector. This selector is equivalent to selecting node as:

<div id="updates-pane-user" class="followed_on">

回答5:

Because . selector considers that there is a class with the following name

$("#updates-pane-user.followed_on")

means : find all elements with id = updates-pane-user which have class name followed_on

回答6:

Use this to escape your dot:

$("#updates-pane-user\\.followed_on")

Reference: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F

回答7:

For sure period creating problem for JQuery to recognise the pattern.

jQuery has three type of selectors:

1. "." selector means to select an element by class name.
2. "#" selector means to select an element by ID.
3. And Element selector that selects elements by their name(div, input etc.)

And you have confused jQuery engine with your naming convention of ID.

Its assuming that there is a div with id="updates-pane-user" and a applied class="followed_on". In such cases jQuery suggest to escape sequence using //. Below should be your syntex to select the element.

$("#updates-pane-user\\.followed_on");

Check it out this wrong fiddle and try to correct using // : http://jsfiddle.net/ukJ8Z/

Cheers!!

回答8:

yes Jimbo answer is correct, but you can still make that work with escaping character with \\

$("#updates-pane-user\\.followed_on")

Escape with TWO (2) backslashes.

Check this link for How do I select an element by an ID that has characters used in CSS notation?

回答9:

You can also use the id attribute selector, like:

$('[id="updates-pane-user.followed_on"]')

because jQuery will treat the attribute as a string, rather than a jQuery class selector.