How to use multiple attribute selectors but for/with specific attribute values?

Question

I am using jQuery and I have the following HTML code:

<a href="/link" data-a='{"one":"sample1","two":"sample2"}' data-b="true">Title</a>

I would like to find the above link by using multiple attribute selectors but for/with specific values contained in data-* attributes. That is, I can find the above link this way

selector = 'a[data-a][data-b]'
$(selector).bind(...)

but I would like to be more specific by finding links having data-a and data-b attributes and whose attribute data-a contains the one key.

How can I do that?

No, parsing the content of attributes is out of the scope of attribute selectors. You need to do that manually. — Bergi
– Bergi, Commented Jun 4, 2014 at 6:28
@Bergi - If so, how can/should I improve the code and the related selector? — Backo
– Backo, Commented Jun 4, 2014 at 6:30
you can try using the *= operator like this a[data-a*='"one"'][data-b] {...} — King King
– King King, Commented Jun 4, 2014 at 6:33
I'm afraid that the HTML code you edited is not a well-formed JSON string, it should be data-a='{"one":"sample1","two":"sample2"}' — King King
– King King, Commented Jun 4, 2014 at 6:35

Community · Accepted Answer · 2017-05-23 12:22:43Z

1

Parsing the content of attributes is out of the scope of attribute selectors. You need to do that manually, by filtering the selected elements:

$('a[data-a][data-b]').filter(function() {
    try {
        return "one" in JSON.parse($(this).attr("data-a"));
    } catch(e) {
        return false;
    }
}).on(…)

You could of course implement a custom selector (or use a regex selector¹), but that won't make much difference. And might dramatically decrease performance.

_{1: Uh, better not on JSON.}

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jun 4, 2014 at 6:34

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

Comments

Fabricator · Accepted Answer · 2014-06-04 06:33:49Z

0

This will work, but does not guarantee data-a is valid json lol

select = 'a[data-a*=\'"one":"\'][data-b]';

using the 'contains' selector: http://api.jquery.com/attribute-contains-selector/

answered Jun 4, 2014 at 6:33

Fabricator

12.8k2 gold badges29 silver badges40 bronze badges

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-04 06:34:04Z

0

we can .filter() the first set of collection to ensure whether the element's data-* attribute contains the particular key.

You can do like this,

$('a[data-a][data-b]').filter(function(){
 return 'key' in JSON.parse($(this).data('a'));
}).bind(..)

answered Jun 4, 2014 at 6:34

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Collectives™ on Stack Overflow

How to use multiple attribute selectors but for/with specific attribute values?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related