Javascript Syntax error, unrecognized expression: when using % in id

Question

for reasons i can't go into too much details with here i have an id that could look like this:

1%20

The reason i have this is because im matching a table of alot of data.

1 means the table row 20 is the list it is in (from the database).

Now i have the following javascript code:

function getSplitId(id) {
    return id.split('%');
}

Which works fine when i do the following:

selected_row_id = getSplitId($(this).get(0).id)[0];

Now i want to get the HTML id of the row ive clicked and for that i have the following code:

rowHtmlId = $(this).id;

Which also works fine however when i need to start using the rowHtmlId to something like for instance:

newElement = $('#' + rowHtmlId).prev();

I get the following error:

Syntax error, unrecognized expression: #44%24

So my question is how can i go around this?

Answer 1

If you have a look at the jQuery documentation, you see

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

% is a meta character so you have to escape it first:

newElement = $('#' + rowHtmlId.replace('%', '\\%')).prev();

Or you simply use getElementById:

$(document.getElementById(rowHtmlId)).prev();

Or even better (depending on the context), just keep a reference to the row element itself:

var row = $(this);
// ... later
newElement = row.prev();

There is no need to query for it again if you already have a reference to it.

Answer 2

Just add a backslash to escape the percent sign:

id.split('\%');

in getSplitId() change from:

return id.split('%');

to

return id.split('\%');