How to select class[array] in jQuery?

Question

I have elements like this...

<input type="text" name="name-lang[en]" id="name-lang[en]"> Name in English
<input type="text" name="name-lang[fr]" id="name-lang[fr]"> Name in France

And my jQuery is...

$('#name-lang[en]').hide();

which is not work.
And this is not work too.

$('#name-lang\[en\]').hide();

These are elements for html 5.

That id is invalid: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Matteo Tassinari, Sep 04 '14 at 16:18
@MatteoTassinari: From your linked question: *"HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters."* — Felix Kling, Sep 04 '14 at 16:20
Nope, i don't think it is invalid in html 5. You may test it yourself with this html. test and go to test here. http://validator.w3.org/#validate_by_input and the result is `Passed, 2 warning(s)` — vee, Sep 04 '14 at 16:31

Felix Kling · Accepted Answer · 2014-09-04T16:30:27.343

3

Since \ is the escape character in strings, '#name-lang\[en\]' is equivalent to '#name-lang[en]':

> console.log('#name-lang\[en\]');
#name-lang[en]

You have to escape the \ as well:

$('#name-lang\\[en\\]')

If you don't want to escape the characters, you can use the attribute selector with a quoted value:

$('input[id="name-lang[en]"]')
$('input[name="name-lang[en]"]')

This is well explained in the jQuery documentation:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").

edited Sep 04 '14 at 16:30

answered Sep 04 '14 at 16:22

Felix Kling

795,719
175
1,089
1,143

The id i use is invalid but thank you, your answer works fine. – vee Sep 04 '14 at 16:24
@vee: It's invalid in HTML4 but not in HTML5. – Felix Kling Sep 04 '14 at 16:24
1

I remember writing up that documentation years ago, when we ran into IDs being generated from a CMS and being outside of our control, IIRC. *sniff* Memories. – ajm Sep 04 '14 at 16:27
@ajm: If only more people would read documentation :-) :-/ :-( – Felix Kling Sep 04 '14 at 16:29
`` test `` tested and it is passed! Thanks @FelixKling – vee Sep 04 '14 at 16:33

score 0 · Answer 2 · answered Sep 04 '14 at 16:26

0

this will work

$('input[name=name-lang\\[en\\]]')

but anyway, it's wrong approach: 1) to have ID of element be exactly the same as NAME attribute; 2)use additional [] in ID w/o special need

answered Sep 04 '14 at 16:26

shershen

9,875
11
39
60

How to select class[array] in jQuery?

2 Answers2