Using HTML entities in HTML attributes

Question

I'm getting this:

Uncaught Error: Syntax error, unrecognized expression: [data-id=1|31|2]

So what I gather from this and my attempts to fix it is that you can't use any special characters in HTML attributes. So, does anyone know of a way I can separate numbers within an attribute and maintain the ability to manipulate with javascript?

I threw this together real quick to show the issue better than I can explain. http://jsfiddle.net/zacharynicoll/fbJYq/

Any reason why you chose not to enclose the expression in double quotes? — Salman Arshad
– Salman Arshad, Commented Feb 21, 2012 at 16:17
Reason? More like the absence of reason is why I chose to do that. — Zachary Nicoll
– Zachary Nicoll, Commented Feb 21, 2012 at 16:28

Kokos · Accepted Answer · 2012-02-21 16:14:26Z

1

The problem is not with the | symbol but with your selector.

$('ul[data-id=' + id + ']').show();

Should be

$('ul[data-id="' + id + '"]').show();

Without the quotes any special characters will be picked up as part of the selector.

answered Feb 21, 2012 at 16:14

Kokos

9,1715 gold badges29 silver badges45 bronze badges

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

1 Comment

Zachary Nicoll Over a year ago

Don't you hate when you work on a bug for an hour or so, and the solution turns out to be, "add this one little character." Thank you good sir, worked perfectly.

Alex · Accepted Answer · 2012-02-21 16:13:56Z

1

You forgot to add the double quotes

From:

$('ul[data-id=' + id + ']').show();

To:

$('ul[data-id="' + id + '"]').show();

http://jsfiddle.net/kgMGB/3/

answered Feb 21, 2012 at 16:13

Alex

35.5k5 gold badges81 silver badges94 bronze badges

1 Comment

Zachary Nicoll Over a year ago

Sorry Xander, you're absolutely correct, I did forget to add the double quotes, but Kokos answered first. Thanks though!

Mörre · Accepted Answer · 2012-02-21 16:15:06Z

1

Try with "":

 $('ul[data-id="' + id + '"]').show();

EDIT: Wow, three people with the correct answer simultaneously. I won't delete mine though, but only because I think this is very funny :) ;) ;-) :) (Give the upvotes to the guy who was 1 min. faster, i.e the farthest down, I suggest)

answered Feb 21, 2012 at 16:15

Mörre

5,7536 gold badges40 silver badges68 bronze badges

7 Comments

punkrockbuddyholly Over a year ago

To be fair, my answer works too and I was a minute quicker ;P

Mörre Over a year ago

See my edit.... your immediately voiced worries make this even funnier, on this "free work for absolutely nothing" website - a great place for psychological studies :) ;) No offense, really, PLEASE.

punkrockbuddyholly Over a year ago

Though mine works I've no idea whether it should work or not. But it does on my browser without the extra quotes.

punkrockbuddyholly Over a year ago

You're a gentleman sir. The fact that three other people suggested it was the missing quotes leads me to believe they're more right than me but as I say, it works!

Zachary Nicoll Over a year ago

Meh, yours was one minute later than theirs, I wouldn't quite say simultaneously. :)

|

punkrockbuddyholly · Accepted Answer · 2012-02-21 16:13:40Z

0

Just replace the | with a -

http://jsfiddle.net/kgMGB/2/

answered Feb 21, 2012 at 16:13

punkrockbuddyholly

9,8147 gold badges41 silver badges72 bronze badges

Collectives™ on Stack Overflow

Using HTML entities in HTML attributes

4 Answers 4

1 Comment

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related