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?

Answer 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.}

Answer 2

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/

Answer 3

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