Clever Geek Handbook

Attribute selector containing colon doesn't find any elements

I have the following HTML tags and want to select them using jQuery:

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

So, I want to highlight all tags that have an attribute foo:bar

.

I've tried the following:

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

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

Is this possible in jQuery?

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

+3


source to share


2 answers


It is possible. You need to avoid any special character with\\ 

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


DOC:

To use any of the metacharacters (for example! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) As a literal part of a name, it must escape with two backslashes traits: \\. For example, an element with id = "foo.bar", you can use the selector $ ("# foo \\. bar").

+7


source


For example, we have HTML:

<span id="item-1023293" pr:position="hr">Jhon</span>

We need to select all the span elements by attribute.



So the selector should look like this:

document.querySelectorAll('span[pr\\:position="hr"]')
0


source






More articles:


All Articles