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
– musefan, Commented Apr 19, 2012 at 16:46

Community · Accepted Answer · 2017-05-23 10:29:47Z

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, 2017 at 10:29

CommunityBot

11 silver badge

answered Apr 19, 2012 at 16:44

calebds

26.3k9 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SSH This Over a year ago

+1 the best solution would be to change your element IDs, probably not what you wanted to hear :)

June Over a year ago

thank you, let me check with the content owner see if they can update their contents.

calebds Over a year ago

@June There is a way around this with \\ if you can't edit the content. See update

Chandra Sekhar K · Accepted Answer · 2012-04-19 17:47:18Z

$("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

Collectives™ on Stack Overflow

jQuery div addclass

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related