Attribute selector containing a colon is not finding any elements

Question

I have following HTML-Tags and want to select them by jQuery:

<div foo:bar="test"></div>
<span foo:bar="test2"></span>
<xxx foo:bar="test3"></xxx>

So, I want to select all tags, that have the attribute foo:bar.

I tried following:

$('[foo:bar]').addClass("fooBar");
// Error: Syntax error, unrecognized expression: [adv:sensorid]

I know, that the correct Syntax would be something like data-foo-bar, but I have to use foo:bar.

Is this even possible in jQuery?

I can even use AngularJS if it helps somehow. Thank you very much!

Answer 1

It's possible. You need to escape any special character with a \\

$('[foo\\:bar]').addClass("fooBar");

DOC:

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