jQuery div addclass

Question

I have the following code to add active class to selected div:

$("div #"+ myID).addClass( "active" );

this only works when myID is one word, when myID has space in it, the code broke, I tried to wrap myID with quote, does not work.

Lots of the content have div id with space, since I'm not the content owner, don't have control to correct the content, I can only modify my code to work with the content. Is there any way to point to div id with space? thank you.

Problem solved. thank you all :-)

ID values for elements should not contain spaces, correct them — musefan, Apr 19 '12 at 16:46

score 8 · Answer 1 · edited May 23 '17 at 10:29

8

Element ID's should not have spaces.

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 (".").

From HTML spec.

What are valid values for the id attribute in HTML?

If the element ID is out of your control, escape spaces with \\ in your selector:

<div id="target element"></div>

$('#target\\ element').doSomething(); // escape invalid chars with \\

In your case, you'd have to replace spaces in myID with '\\ '

DEMO

edited May 23 '17 at 10:29

Community

1
1

answered Apr 19 '12 at 16:44

calebds

25,670
9
46
74

+1 the best solution would be to change your element IDs, probably not what you wanted to hear :) – SSH This Apr 19 '12 at 16:45
thank you, let me check with the content owner see if they can update their contents. – June Apr 19 '12 at 17:23
@June There is a way around this with \\ if you can't edit the content. See update – calebds Apr 19 '12 at 17:39

Chandra Sekhar · Accepted Answer · 2012-04-19T17:47:18.350

$("div #"+ myID).addClass( "active" );

Simply above code not valid

HTML5 Global id Attribute:

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

Must begin with a letter A-Z or a-z
Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
In HTML, all values are case-insensitive.
Must contain at least one character (can’t be empty), and that it can’t contain any space characters.

Example: In HTML5 below id's are valid.

<p id="#">Foo.</p>
<p id="##">Bar.</p>
<p id="♥">Baz.</p>
<p id="©">Inga.</p>
<p id="{}">Lorem.</p>
<p id="“‘’”">Ipsum.</p>
<p id="⌘⌥">Dolor.</p>
<p id="{}">Sit.</p>
<p id="[attr=value]">Amet.</p>
<p id="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!</p>

In jQuery: jQuery does handle any valid ID name. We just need to escape meta-characters (dots, semicolons, square brackets...etc). (like java-script having problem with quotes).

While using id in jQuery has below limitations.

// Does not work
 $("#some:id")

 // Works!
 $("#some\\:id")

 // Does not work
 $("#some.id")

 // Works!
 $("#some\\.id")

See the reference here

jQuery div addclass

2 Answers2