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/

Answer 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)

Answer 2

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.

Answer 3

You forgot to add the double quotes

From:

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

To:

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

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

Answer 4

Just replace the | with a -

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