There is something I'm not seeing here.. I have a string-variable with elements id:

var sf_new_id = "#sf_widget_choice-32:14.86:1:1"

I get that string from another element like this('sf_selectedmethod' is another element):

var anotherid = sf_selectedmethod.attr('id');

Then I removed the last char and add some info to that id, namely the last number and the '#':

var sf_new_id = anotherid.substr(0, anotherid.length-1); // Now without the last char.
sf_new_id = '#'+sf_new_id+'1';

And it becomes the string described above.

And I'm trying to access the element with jQuery like this:

$(sf_new_id).addClass("...");

The element with that id exists, but nothing happens. I tried hiding the element as well:

$(sf_new_id).hide();

But still nothing happens.

I put the whole element into console.debug, and it shows an empty object:

console.debug($(sf_new_id));

Outputs: Object[] in the console

What am I missing here?

Edit: I tried the escape-thingy, and it seems to work, but now the problem is that how can I escape the colons and such when the info is in the variable?

There is something I'm not seeing here.. I have a string-variable with elements id:

var sf_new_id = "#sf_widget_choice-32:14.86:1:1"

I get that string from another element like this('sf_selectedmethod' is another element):

var anotherid = sf_selectedmethod.attr('id');

Then I removed the last char and add some info to that id, namely the last number and the '#':

var sf_new_id = anotherid.substr(0, anotherid.length-1); // Now without the last char.
sf_new_id = '#'+sf_new_id+'1';

And it becomes the string described above.

And I'm trying to access the element with jQuery like this:

$(sf_new_id).addClass("...");

The element with that id exists, but nothing happens. I tried hiding the element as well:

$(sf_new_id).hide();

But still nothing happens.

I put the whole element into console.debug, and it shows an empty object:

console.debug($(sf_new_id));

Outputs: Object[] in the console

What am I missing here?

Edit: I tried the escape-thingy, and it seems to work, but now the problem is that how can I escape the colons and such when the info is in the variable?

• javascript
• jquery

• do your codes is executed after the page is loaded?$(document).ready(function(){...your code...}) – Yangguang Commented Jun 3, 2015 at 6:06
• 3 You need to escape characters like ':' and '.' in your string variable. – Prachit Commented Jun 3, 2015 at 6:06
• I have doubt javascript variable declared with # as first character?? – shreyansh Commented Jun 3, 2015 at 6:08
• @shreya the # is an indicator that the selector is referring to an ID. – Alex McMillan Commented Jun 3, 2015 at 6:10
• Edited the question a bit. Added more info! Basically I get the string from another element, so does the colons and periods still affect the jquery? – GotBatteries Commented Jun 3, 2015 at 6:16

4 Answers 4

You can technically use colons and periods in id/name attributes, but I would suggest avoiding both.

In several JavaScript libraries like jQuery, both the period and the colon have special meaning and you will run into problems if you're not using them carefully. Periods are class selectors and colons are pseudo-selectors (eg., ":hover" for an element when the mouse is over it).

Try to avoid "." and ":" in your ID attribute or if is it not possible . please try escaping them in javascript as below:

var sf_new_id = "#sf_widget_choice-32\\:14\\.86\\:1\\:1";

You have to escape special characters in your string, to form a valid selector.

var sf_new_id = "#sf_widget_choice-32:14.86:1:1";

sf_new_id = sf_new_id.replace(/:/g, "\\:")
                     .replace(/\./g, "\\.")

$(sf_new_id).hide();

You need to escape : and . in your selector. Try this:

var sf_new_id = "#sf_widget_choice-32\\:14\\.86\\:1\\:1";

ID should match:

[A-Za-z][-A-Za-z0-9_:.]*

1. Must Start with A-Z or a-z characters
2. May contain - (hyphen), _ (underscore), : (colon) and . (period)

but one should avoid : and . beacause:

For example, an ID could be labelled "a.b:c" and referenced in the style sheet as #a.b:c but as well as being the id for the element, it could mean id "a", class "b", pseudo-selector "c". Best to avoid the confusion and stay away from using . and : altogether.