What could make jQuery cannot get dom by its id?

Question

When i use

alert(j(this).attr("id"));

I can see the pop up window shows up _denominations[3].id.denominationId

but when i call

alert(j('#_denominations[3].id.denominationId').attr("id"));

The pop up window shows me 'undefined', the actual html DOM is looks like this:

<div class="form-field">
    <select id="_denominations[3].id.denominationId" class="removableDenom" name="denominations[3].id.denominationId">
</div>

So what chance could possibly make undefined pop up happens

My initial thought is you can't have those periods and brackets. Maybe. — Jared Farrish, Mar 23 '13 at 17:51
I thought something about [this was familiar](http://stackoverflow.com/questions/5899881/jquery-selector-for-select-with-id1) — Jared Farrish, Mar 23 '13 at 17:54

score 4 · Accepted Answer · answered Mar 23 '13 at 17:50

4

Try escaping the periods and brackets in the ID value itself. So your value:

'#_denominations[3].id.denominationId'

Becomes

'#_denominations\\[3\\]\\.id\\.denominationId'

It's likely that jQuery is confusing these with classes and attribute selectors.

Example: http://jsfiddle.net/jonathansampson/ZUMna/

answered Mar 23 '13 at 17:50

Sampson

265,109
74
539
565

You need double-slashes (`\\.`) when escaping selectors. – JJJ Mar 23 '13 at 17:53
1

@Juhana, Yeah, that was the answer to my [similar question](http://stackoverflow.com/questions/5899881/jquery-selector-for-select-with-id1) too. – Jared Farrish Mar 23 '13 at 17:55
@Jonathan Sampson Thank you, but can `j('#'+obj.attr('id')).attr('id') `work without escaping? – Dreamer Mar 23 '13 at 18:00
@Dreamer Yes, but what's the point? `obj` is already the object you want, why select it again? – JJJ Mar 23 '13 at 18:03
@Jonathan Sampson I try to extract the index of one objects id and find another object by using the index and the id pattern. – Dreamer Mar 23 '13 at 18:08
@Dreamer A few resources can be found online that provide functions to escape jQuery selectors. A couple would be that of [Alexandre Giannini](http://alexandregiannini.blogspot.com/2011/05/escaping-strings-for-jquery-selectors.html), and another by [Mattman](http://totaldev.com/content/escaping-characters-get-valid-jquery-id). – Sampson Mar 23 '13 at 18:15
@Jonathan Sampson thank you for the resource, ticket closed :) – Dreamer Mar 23 '13 at 18:20

bipen · Answer 2 · 2013-03-23T17:56:28.790

3

you need to escape the special characters in ID..that is [,],..... since jquery takes [] as attribute selector and . as class selector..

try this

alert(j('#_denominations\\[3\\]\\.id\\.denominationId').attr("id"));

edited Mar 23 '13 at 17:56

answered Mar 23 '13 at 17:51

bipen

36,319
9
49
62

3

Except you need to escape twice, once for the JS string and once for jQuery selector. – Spencer Lockhart Mar 23 '13 at 17:54
1

oooo yes.. thank u .. :).. updated.. – bipen Mar 23 '13 at 17:56

MattW · Answer 3 · 2013-03-23T17:59:27.357

1

jQuery is assuming those [] are an attribute selector, not part of the ID; special characters must be escaped. [] aren't actually allowed in HTML ids before HTML5, which could cause you other problems down the road - I've seen document.getElementById fail because the ID started with a number, for example, even with an HTML5 doctype, in an older browser.

edited Mar 23 '13 at 17:59

answered Mar 23 '13 at 17:51

MattW

4,480
1
12
11

1

Brackets are allowed in HTML5 (you linked to HTML4 spec) and the periods must also be escaped. – JJJ Mar 23 '13 at 17:59
1

No reason for a negative on this, you are correct. – Spencer Lockhart Mar 23 '13 at 17:59

score 1 · Answer 4 · answered Mar 23 '13 at 18:02

1

another shortcut .

j('[id="_denominations[3].id.denominationId"]')

answered Mar 23 '13 at 18:02

rab

4,134
1
29
42

1

This will work, but it's very slow compared to straight-up id selection because jQuery has to traverse every element on the page instead of using the native `getElementById()`. – JJJ Mar 23 '13 at 18:07
Functional, but it defeats Sizzle's optimization of ID lookups, so it become a performance issue on large pages. – MattW Mar 23 '13 at 18:09

diggersworld · Answer 5 · 2013-03-23T18:11:35.970

0

I would strongly recommend you simplify your id and name attributes.

The following is from the HTML4 documentation and may differ for different versions of HTML:
http://www.w3.org/TR/html4/types.html#type-id

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Personally I only ever use alphanumeric, hyphen and underscore characters. I try to keep them short and semantic. This makes it easier not only for myself, but any other developers who might work with my code.

edited Mar 23 '13 at 18:11

answered Mar 23 '13 at 18:04

diggersworld

12,770
24
84
119

That's HTML 4. Brackets are allowed in HTML5. Anyway this doesn't really answer the question. – JJJ Mar 23 '13 at 18:08
1

It may not answer the question. However if the code was written to good standard in the first place the question would not have needed asking. – diggersworld Mar 23 '13 at 18:10

What could make jQuery cannot get dom by its id?

5 Answers5