Proper CSS syntax to get json encoded data attributes by jquery

Question

I need to fetch one of json encoded data inside data-people:

<ul>
  <li data-test="one" data-people='{"name" : "Paul", "color" : "black"}'>Paul</li>
  <li data-test="two" data-people='{"name" : "John", "color" : "blond"}'>John</li>
  <li data-test="three" data-people='{"name" : "Jane", "color" : "black"}'>Jane</li>
</ul>

It is pretty straight forward to fetch via data-test (just example):

$('ul li[data-test="two"]').show();

Now I want to show ul li with data-people that has color blond (ignoring data-test that only exist for sample above).

I tested below but this doesn't work as expected:

$('ul li[data-people="{"color": "blond"}"]').show();

I don't mean to get color value like: $('ul li').data('people').color, but to do proper CSS syntax inside the object.

Any hint is very much appreciated. Thanks.

ThiefMaster · Accepted Answer · 2013-01-06 12:31:40Z

5

You can't do this in any clean way using just selectors except by using the *= ("attribute contains") selector. And that one will only work if the JSON contains exactly that substring - remove the space before : and it will stop working.

$('ul li[data-people*=\'"color" : "blond"\']').show();

What you probably really want is .filter():

$('ul li[data-people]').filter(function() {
    return $(this).data('people').color == 'blond';
}).show();

This way you use the (fast) CSS selector engine to get only relevant elements (those that have a data-people attribute) and then filter the resultset using the callback function.

answered Jan 6, 2013 at 12:31

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

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

6 Comments

swan Over a year ago

Hmmm, sounds reasonable. Is this definitive? So I can mark yours as a reply. Thanks

Alexander Over a year ago

Notice this is not CSS syntax, these are jQuery selector syntaxes

ThiefMaster Over a year ago

And the question is tagged with jquery ;)

Alexander Over a year ago

I'm talking about the title ;)

ThiefMaster Over a year ago

Actually the first example works with just CSS, too: jsfiddle.net/ThiefMaster/7f3HK

|

Collectives™ on Stack Overflow

Proper CSS syntax to get json encoded data attributes by jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related