访问JQuery data-json元素

Question

I have the followings anchors on the page:

<a href="#" data-json='{"first":"SGVsbG8=","last":"V29ybGQ=","mail":"aGVsbG9Ad29ybGQuY29t","favorite":"eWVz","answer":"VGhpcyBpcyBteSBhbnN3ZXJzIQ==","id":"MQ==","read":"yes"}'>Hello</a>

<a href="#" data-json='{"first":"SGVsbG8=","last":"V29ybGQ=","mail":"aGVsbG9Ad29ybGQuY29t","favorite":"eWVz","answer":"VGhpcyBpcyBteSBhbnN3ZXJzIQ==","id":"MQ==","read":"no"}'>Hello</a>

What I want is to change data-json read value to no for anchors whose first value is SGVsbG8=

I tried following but didn't work:

($('.usr-list a').data('json').first == 'SGVsbG8=').each(function(i){$(this).data('json').read('no')});

Is that possible to do?

Answer 1

Yes, this is possible. Result of a comparison ($('.usr-list a').data('json').first == 'SGVsbG8=') is a boolean value which doesn't have each method, for filtering the elements you should iterate through them and read their data-json attributes:

$('a').each(function () {
    var o = $(this).data('json');
    if (o.first === 'SGVsbG8=') {
        o.read = 'no';
    }
});

Please note that the above snippet doesn't change the data-json attributes. jQuery data method after parsing the data-* atributes stores them internally. If you want to change the attributes after modifying the property you should JSON encode the objects and reset the attributes.

this.setAttribute('data-json', JSON.stringify(o));

Answer 2

function updateJson(object) {
$("a").each(function() {
   var json = $(this).data("json");
   if(json["first"]==object["first"]) {
     json["read"] = "no";
     $(this).data("json",json);
   }
});
}

updateJson({first : "SGVsbG8="});

This can be used for that purpose :)