jQuery: How to access an element with a plus sign (+) in the id

Question

I have a jQuery loop that appends multiple rows to a table. The number of rows can change at run-time, so the row ID is generated dynamically.

$("#tableBody")
    .append($("<tr>")
        .attr('id','row-icon' + currentID)...

At a later point, I then need to access these added rows. However, when the value of currentID has a '+' symbol in it - I get an "undefined" error when I try to access the row element.

For example, the line below works when currentID is "1" - but it fails when the ID is "vm+1".

var testID = $("#row-icon" + currentID).attr("id");

Am I missing an easy solution to "escape" the extra '+' symbol?

Working example here.

EDIT: I should note that the id's are being sent by a 3rd-party - so I have no control over removing the '+' symbol.

Is it possible to never put the `+` in the ID? Maybe an underscore instead? — Corey Ogburn, Aug 13 '13 at 14:00
An ID must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits, hyphens , underscores, colons, and periods. So those are illegal id's. — Tdelang, Aug 13 '13 at 14:01
@Tdelang: True in HTML4 but HTML5 is much more permissive about the `id` attribute — Andrew Whitaker, Aug 13 '13 at 14:02
A JavaScript variable should not have a **+** in its name. **+** has a special meaning in JavaScript for concatenation or addition. — Kneel-Before-ZOD, Aug 13 '13 at 14:02
@Kneel-Before-ZOD: The *variable* doesn't have a **+** in its name. The *value* of that variable does have a **+** which is perfectly fine. — Andrew Whitaker, Aug 13 '13 at 14:03
@AndrewWhitaker Read the question again. He gave the id of a row as **vm+1** . — Kneel-Before-ZOD, Aug 13 '13 at 14:04
An HTML5 id can have any character: http://mathiasbynens.be/notes/html5-id-class — Daniel Gimenez, Aug 13 '13 at 14:08
In your `click` function, why not just pass `this` along instead of the actual ID? -> http://jsfiddle.net/svn8W/5/ — J.P., Aug 13 '13 at 14:11
@Kneel-Before-ZOD: Read my comment again. There's a difference between a *variable name* and its *value*. We're talking about the *value* of the variable (or the `id` property) in this case. In other words he's not trying to create a variable named `var vm+1`, he's manipulating a variable who's *value* is `vm+1`. — Andrew Whitaker, Aug 13 '13 at 14:28
@adeneo Many thanks, that also works if the ID has multiple '+' symbols. I always thought the '#' symbol had to be used, I haven't seen `[id=` used in that context before. — Locotes, Aug 13 '13 at 14:56

huysentruitw · Accepted Answer · 2013-08-13T15:00:38.147

It doesn't work, because the + sign is a so called meta-characters in jQuery's selector as explained in the documentation. You should escape it using 2 backslashes:

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"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

So, in your case, you would do (see jsFiddle):

var test = $("#expand-icon" + currentID.replace(/\+/g, '\\+')).attr("src");
var testID = $("#row-icon" + currentID.replace(/\+/g, '\\+')).attr("id");

Thanks Wouter for adding the demo - that solved it. For anyone with a similar problem, an updated jsfiddle can be found here: http://jsfiddle.net/Locotes/svn8W/7/ — Locotes, Aug 13 '13 at 15:19

Selvakumar Arumugam · Answer 2 · 2013-08-13T15:25:43.147

As Others mentioned, using + creates an invalid ID.. but in time, I have been challenged to work with some else code with such scenarios..

You could use \\+ to escape the +. See below,

var test = $("#expand-icon" + currentID.replace('+', '\\+')).attr("src");
var testID = $("#row-icon" + currentID.replace('+', '\\+')).attr("id");

alert(test+'\n'+testID);

DMEO: http://jsfiddle.net/ZdeC8/

For multiple instances, You can use regEx to replace the string. See below,

var test = $("#expand-icon" + currentID.replace(/\+/g, '\\+')).attr("src");
var testID = $("#row-icon" + currentID.replace(/\+/g, '\\+')).attr("id");

score 1 · Answer 3 · answered Aug 13 '13 at 14:12

In such cases where special symbols are used as part of the ID of an element, they must be escaped in order to let jQuery know that these characters are to be treated literally. for example, if an element has an id "vm+8", the following snippet will get the element:

$('#vm\\+8');

However, as a rule, try to avoid using special symbols as part of element IDs.

jQuery: How to access an element with a plus sign (+) in the id

3 Answers3