Question

I’m using jQuery 1.7.1, and no other JS library/framework. I can select most elements just fine, except for one particular table that is giving me trouble. This happens in both Firefox and Chrome.

Here is an image that describes it all:

The steps in this image, in order:

1. I select all of the tables on the page
2. I select a different table than the one I want
3. I set that table to “display: none” (just to illustrate that jQuery doesn’t care about “display: none”)
4. I select that table again, now that it’s been hidden. All is fine.
5. Then I try selecting the table that I actually want. I get nothing in return.
6. I use the initial array of tables to assign the table I want to a variable.
7. jQuery returned that table just fine, and it’s now in the variable “theTableIWant”.
8. The “id” of the table is the exact same “id” I was selecting in step #5, that didn’t work.

Why won’t jQuery just hand over the table to me? Why might this happen?

Answer 1

It doesn’t work because # is a special character in jQuery selectors for ID’s so you get this error: Syntax error, unrecognized expression: #office_set-###

If you really have to use ### in the ID (I wouldn’t recommend it for the reason Matt posted) you can escape it in the select like this:

​$('#office_set-\\#\\#\\#')

Example – http://jsfiddle.net/infernalbadger/fpcME/

You have to double escape as you actually want to pass the \ to the jQuery selector engine.