Jquery: Create hidden attributes? I need to reduce tag bulkyness.

Question

I'm sure we've all done this before:

<a id="232" rel="link_to_user" name="user_details" class="list hoverable clickable selectable">
USER #232
</a>

But then we say, oh my, I need more ways to store tracking info about this div!

<a id="232-343-22" rel="link_to_user:fotomeshed" name="user_details" class="groupcolor-45 elements-698 list hoverable clickable selectable">
User: John Doe
</a>

And the sickness keeps growing. We just keep on packing it inside that poor little element and it's attributes. All so we can keep track of who it is.

So with my limited knowledge of JS, someone please tell me how to do something like this:

<a id="33">USER #33</a>

$(#33).attr({title:'User Record','username':'john', 'group_color':'green', 'element_num':78});

So here we just added what I would call invisible attributes, because we just played God and made those attributes up on the fly like it was no problem. The cool part is that these would be kept in their own little object somewhere in variable land. NOT in the tag itself.

Then later on, in a code nested far far away, be able to say, oh, i wonder what group_color John is...

user_group_color = $(table).find(a['username':'john']).attr('group_color');

THEN BAM!!!! POW!!!!

alert(user_group_color + " is a bitchin color!");

You get to know his group color... all without adding a bunch of bloated element tracking nonsense into our tags.

So does this sort of thing exist? If not, how do I make it?

Answer 1

You can use .data() for just this purpose :), like this:

$("#33").data({title:'User Record','username':'john', 'group_color':'green', 'element_num':78});

Note: IDs can't start with a number, ignoring that to match your example!

And to get the value:

user_group_color = $('table').find('a').data('group_color');

If you needed to find by username still, use .filter() like this:

user_group_color = $('table').find('a').filter(function() {
  return $(this).data('username') === 'john';
}).data('group_color');

---

Not directly to the question, but possibly a time-saver. You could make this a selector as well, like this:

jQuery.expr[":"].username = function(a, b, m) {
  return jQuery(a).data('username') == m[3];
};

Then fetching the element by username would look like:

user_group_color = $('table').find('a:username(john)').data('group_color');

You see the pattern, just use this for any commonly used attribute you need to filter by.

Answer 2

jQuery.data() should do the trick.

Answer 3

If you don't want to use jQuery.data as suggested by others for whatever reason, there's no reason you can't relate data to your elements by ID (or any other attribute). For example:

HTML:

<span id='foo1'>blah blah blah</span>
<span id='foo2'>blah blah blah</span>

Javascript:

var elementData = {
    foo1: {
       x: 1,
       y: 2
    },
    foo2: {
       x: 3,
       y: 4
    },
};

Usage:

var foo = /* ...get one of the `fooX` elements ... */;
var fooData = elementData[foo.attr('id')];
alert(fooData.x); // alerts 1 or 3 depending on which `foo` you have

Adding new data on-the-fly:

elementData[newID] = {
   x: 42,
   y: 73
};

Changing data on-the-fly:

elementData[theID].x = 27;