Question

I am not a heavy user of Javascript/jQuery, but I have start to really get into creating my own UI stuff, such as gallery viewer, alert animations, popup forms etc…

But what is the best way to store data to pull together when needed?

For example:
With the gallery viewer, much like Lightbox, I pull in the href of anchors that have the rel=viewer.

<a href="url" rel=viewer" />
<a href="url" rel=viewer" />

I then extended this for admin users to be able to delete these images, but I needed to pass the media id to do this. So I added…

<a href="url" rel=viewer" viewerid="123" />
<a href="url" rel=viewer" viewerid="456" />

I do not like the idea of creating my own attributes, because I will no doubt forget what I have. But is it possible to store a javascript object/array of data within an anchor? Something like…

<a href="url" rel=viewer" data="{'id':'123', 'foo':'bar'}" />

and then…

var photos = new Array();
$('a[rel=viewer]').each(function(){
    photos.push(  new Array( $(this).attr('data') )  );
});

to give me something like

photos[0] = array('id' => 123, 'foo' => 'bar')
photos[1] = array('id' => 456, 'foo' => 'bar')

Answer 1

as i know data inside tag have to be named? valid syntactic would be

<a href="url" rel=viewer" data-array="{'id':'123', 'foo':'bar'}" />

and you can read it later like that:

$('a').data('array')