Question

If my markup looks like this:

<div data-test="{ "value" : "bar", "_id" : 1234, "name" : "john", "age" : 25 }">...</div>
<div data-test="{ "value" : "foo", "_id" : 1235, "name" : "paul", "age" : 26 }">...</div>
<div data-test="{ "value" : "drummer", "_id" : 1236, "name" : "ringo", "age" : 22 }">...</div>

How would I select a particular element using JQuery if I only had the key ‘bar’ or ‘foo’?

I could pull out the whole object for each row and iterate through it looking for a match but I’d rather not if there is a more efficient method.

How can I cleanly select based on the property of an object?

Answer 1

You can use:

$("div").filter(function() {
    return $(this).data("test").value == "bar";
})

jQuery.data() automatically parses a data value that’s in JSON format into the corresponding object.

FIDDLE