CODEWITHSUNDEEP
jqueryhtmlhtml-tablejquery-selectors
JoeLinux
JoeLinux

Reputation: 4307

jQuery Isn't Grabbing an Element Based on ID Selector

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:

Chrome JavaScript console

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?

Upvotes: 2

Views: 203

Answers (5)

someonelse
someonelse

Reputation: 260

You shouldn't use any of these meta-characters: !"#$%&'()*+,./:;<=>?@[\]^{|}~ in your ids, classes tagnames, attributes and values(also the backtick: ` , but i cant put it in a code block ^^).

if you have to use these characters, you can escape them in your selector with two backslashes

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

btw your question is really relevant when these characters are used as javscript code e.g. in a onclick attribute. You can find elements containing a specific code only when you properly escape the meta-characters (of which there will be a lot).

Source and more information here: http://api.jquery.com/category/selectors/

Upvotes: 2

jimp
jimp

Reputation: 17487

You need to quote the # characters in your ID, since that character is a special character to jQuery.

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

It's double backslashes so JavaScript converts them to single backslashes which jQuery then sees.

Upvotes: 0

bbenatti
bbenatti

Reputation: 1

1) Make sure that the selector of table on step 5 is right. Maybe there's more than one element with the same id.

2) When you assign a JQuery element to a variable you can't call the raw DOM attributes just like that. Try:

theTableIWant.attr('id');

Or:

var theTable = $(theTableIWant).get(0);
theTable.id;

Upvotes: 0

Richard Dalton
Richard Dalton

Reputation: 35793

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.

Upvotes: 3

Matt Whipple
Matt Whipple

Reputation: 7134

"#" is not officially valid within DOM id's: http://www.w3.org/TR/REC-xml/#NT-Name and therefore you won't get consistent support.

Upvotes: 2

Related Questions