CSS selector to select an id with a slash in the id name?

Question

I've got <span id="/about-us"> being generated by this CMS I'm using.

I'd like to select this element with jQuery but it doesn't seem to like selecting elements with a slash in them.

Is this possible?

Please note: http://www.w3schools.com/tags/att_standard_id.asp : Naming rules for ID: * Must begin with a letter A-Z or a-z, * Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."), * Values are case-sensitive — Sarah West, Mar 01 '11 at 11:45
Is it truly impossible to fix the CMS? This might come back and bite you in some odd way. — thirtydot, Mar 01 '11 at 12:25
HTML5 allows this. http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Belrog, May 14 '14 at 22:02
Please accept answer from @AGuyNamedGerald. Much more succinct and dynamic of an answer — Kolob Canyon, Apr 12 '18 at 21:38

score 54 · Accepted Answer · answered Mar 01 '11 at 11:53

54

you can do

$("#\\/about-us")

answered Mar 01 '11 at 11:53

AGuyCalledGerald

Thank you... I prefer your answer. – BENARD Patrick Mar 18 '15 at 09:22
1

I guess you got a few lucky points here. I upvoted, assuming this would work. It doesn't, at least in my case. My slash isn't at the beginning of the id. $("#10.0.0.0\\/8") selects nothing, even though "10.0.0.0/8" is the id of a real DOM object. – vastlysuperiorman Jul 06 '16 at 20:11
2

@vastlysuperiorman you sure? I just tested it on `id=BVB/IBD_Required` and `$('#BVB\\/IBD_Required')` worked – Kolob Canyon Apr 12 '18 at 22:16
@KolobCanyon That was two years ago. I've since changed jobs and don't recall the browser and jQuery versions, but I believe I had my sanity back then. I likely said that it didn't work for me because it didn't work for me. Glad to hear it works for you. It's a clever solution! – vastlysuperiorman Apr 12 '18 at 22:49

score 30 · Answer 2 · edited Feb 26 '13 at 09:47

30

you can do it like this

     $("span[id*='/about-us']")

where it will return the span with '/about-us' in it's id attribute.

edited Feb 26 '13 at 09:47

Community

answered Mar 01 '11 at 11:43

Furqan Hameedi

score 13 · Answer 3 · answered Nov 14 '13 at 03:54

13

Use the regular way:

document.getElementById('id/with/slashes')

answered Nov 14 '13 at 03:54

Kevin

2

This is a totally valid answer, but I personally find it bad practice to have one or two vanilla javascript lines where the rest uses jQuery. To keep consistent you could `$(document.getElementById('id/with/slashes'))` but that isn't very pretty. – vastlysuperiorman Jul 06 '16 at 18:37
@KolobCanyon lol... valid point. My comment was more focused on the value that would be assigned from the statement in question. If other places in code expect jQuery objects passed to them, wrapping a getElementById in `$()` would help avoid inconsistent behavior. – vastlysuperiorman Apr 12 '18 at 22:10

score 2 · Answer 4 · answered Jul 01 '19 at 17:26

2

You can use jQuery escapeSeletor to do this.

$("#" + $.escapeSelector("id/with/slashes"))

answered Jul 01 '19 at 17:26

Hemendra Singh

Not sure why this was down-voted, $.escapeSelector() works perfectly in my case - its just a shim for the CSS Working Group's CSS.escape() method. – HeavenCore Nov 22 '19 at 13:22

score 0 · Answer 5 · edited May 23 '17 at 12:10

0

see

edited May 23 '17 at 12:10

Community

answered Mar 01 '11 at 11:45

diEcho

5 Answers5