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?
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">
Use this to escape your dot:
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
For sure period creating problem for JQuery to recognise the pattern.
jQuery has three type of selectors:
"."
selector means to select an element by class name."#"
selector means to select an element by ID.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 appliedclass="followed_on"
. In such casesjQuery
suggest to escape sequence using//
. Below should be your syntex to select the element.Check it out this wrong fiddle and try to correct using
//
: http://jsfiddle.net/ukJ8Z/Cheers!!
Because
.
selector considers that there is a class with the following namemeans : find all elements with id =
updates-pane-user
which have class namefollowed_on
You can also use the id attribute selector, like:
because jQuery will treat the attribute as a string, rather than a jQuery class selector.
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:
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."