Why would the jQuery selector return null?

Question

I'm writing javascript for a page that was built using a WYSIWYG. No, I cannot at present go in and change the IDs or really tweak the DOM.

This is the DOM element I'm trying to select (this was created by the WYSIWYG).

<td nowrap="true" align="left" id="vW2070;" name="vW2070;" style="padding-left: 2pt; padding-right: 2pt; border-left: 1pt solid black; cursor: auto; background-color: rgb(164, 194, 64); color: rgb(0, 0, 0);" class=" nAll selected" selected="1" sn="itemList">TOP 5</td>

Currently in my javascript the ID I'm trying to get is #vW2070;. For some reason document.getElementById("vW2070;") returns perfectly but $("#vW2070;") returns null. Why is this? I need to use the jQuery selector.

The function in question is ran on $(document).ready.

I've never seen anything like this.

Thank you, all.

EDIT: Without the semi-colon it doesn't pick it up either. The semi-colon is literally in the ID attribute on the element thanks to the WYSIWYG.

jquery doesn't ignore `;`, so `$("#vW2070;")` should be `$("#vW2070")` — paulcol., Dec 22 '11 at 14:29
it returns a literal `null`? or an empty jquery set? because if its the former, are you use that $ is an alias for jQuery and not another js framework? — J. Holmes, Dec 22 '11 at 14:31
*"The semi-colon is literally in the ID attribute"*. Then I think you'll need an attribute filter `$('div[id="vW2070;"]')` to ensure cross browser functionality. — , Dec 22 '11 at 14:37
Next time try to ask a full question including the CMS and preferably a jsfiddle or similar. — Richard, Dec 22 '11 at 15:04

Dennis · Accepted Answer · 2011-12-22T14:44:40.387

7

You can escape the semicolon like this:

$("#vW2070\\;") //Use one backslash to escape the semicolon for the Sizzle parser and the other to escape the first backslash for the javascript parser, so two in total

or

$(document.getElementById("#vW2070;")).jquerystuff(...);

JSFiddle: http://jsfiddle.net/HTyQC/

Also, a relevant link on how versatile the id attribute is.

edited Dec 22 '11 at 14:44

answered Dec 22 '11 at 14:32

Dennis

32,200
11
64
79

While your solution *should* work, for some reason when I escape it, it still fails. I've realized now that document.getElementById("vW2070;") returns null as well. I have no idea why. This is insane... I'm going to mark this answer as correct. When I figure out what's wrong with my code and my crazy situation I'll post the solution here. – Jesse Atkinson Dec 22 '11 at 14:46
Again... trust me... I would've never used it. It's a tool called MicroStrategy which tracks analytics data. I was recently hired in and the site had already been built using their WYSIWYG tool. Phase 2 (next year) is for me to re-do the whole thing :) I can't wait. We're doing it this way now to meet a deadline. I couldn't exactly re-write the whole thing. – Jesse Atkinson Dec 22 '11 at 15:05

score 3 · Answer 2 · edited May 23 '17 at 10:08

3

Since you can't edit your ID that has a semicolon, try escaping it in the selector, like so:

$("#vW2070\\;")

Escaping here is nothing more than adding the "\ \" before the semicolon.

Here's some more insight: What are valid values for the id attribute in HTML?

edited May 23 '17 at 10:08

Community

1
1

answered Dec 22 '11 at 14:32

Damon Bauer

2,718
1
22
35

score 1 · Answer 3 · answered Dec 22 '11 at 14:29

1

Try removing the ; your shouldn't need it

$("#vW2070")

answered Dec 22 '11 at 14:29

Dominic Green

10,142
4
30
34

score 1 · Answer 4 · answered Dec 22 '11 at 14:30

1

Try removing the semi-colon $("#vW2070;") to $("#vW2070")

Are you not getting an error message? In chrome you should get Uncaught Error: Syntax error, unrecognized expression: ;

answered Dec 22 '11 at 14:30

Richard

4,341
5
35
55

dku.rajkumar · Answer 5 · 2011-12-22T14:40:28.177

1

you should try escaping ";" by using "\"

change $("#vW2070;") to $("#vW2070\\;")

fiddle : http://jsfiddle.net/28cZu/

edited Dec 22 '11 at 14:40

answered Dec 22 '11 at 14:30

dku.rajkumar

18,414
7
41
58

score 1 · Answer 6 · edited May 23 '17 at 11:47

1

If your element's id really does have a semi-colon in it, then ~~technically its invalid.~~

Edit: The HTML5 spec doesn't appear to preclude any characters other than spaces.

You can just espace the semi-colon with a double backslash #vW2070\\;

Otherwise, just drop the semi-colon from your selector code.

edited May 23 '17 at 11:47

Community

1
1

answered Dec 22 '11 at 14:32

isNaN1247

17,793
12
71
118

score 0 · Answer 7 · answered Dec 22 '11 at 14:41

0

It is jquery bug or we can say limitation in current jquery version. It will not allow ';' in ID.

answered Dec 22 '11 at 14:41

Robin Michael Poothurai

5,444
7
23
36

Why would the jQuery selector return null?

7 Answers7