jQuery string-variable as id-selector return empty object

Question

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?

Answer 1

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";

Answer 2

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();

Answer 3

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

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