Adding variables to jquery objects

Adding variables to jquery objects

I'm making some jQuery UI elements, and once an element is created, I want to add some custom functions and variables - I don't want to clutter up other jQuery objects by putting the functions in all jQuery objects, and obviously, the variables need to be different between different objects. However, the issue is, when I re-acquire the item, I won't have access to the variable any more.

That was probably confusing. Another way of putting it:

  1. (function($)
    {
  2.   var _MyUI_id=0;
  3.   jQuery.fn.MyUICreate = function(opts)
  4.   {
  5.     this.each(function()
  6.     {
  7.       var obj=$(this)
  8.       //... code to turn the object into a MyUI object omitted to be concise
  9.       obj.MyUI_id = _MyUI_id;
  10.       _MyUI_id++;
  11.     }
  12.   }
  13. })(jQuery)
  14. //now, create one
  15. $('#some_div').MyUICreate({});
  16. //The desired effect would be to give me the id in #14, instead I get 'undefined'.
  17. alert($('#some_div').MyUI_id);

My 'solution', is to create an object variable in jQuery.fn called 'Collections'. It's indexes are the names of the new types, and each contains an object, the keys of which are the IDs of the UI elements that are converted to the type, and the values the jQueries objects. This is not only hackish, but it has a LOT of potential bugs. The code for this would look like:

This is in the 'create' function, at the end.
  1. jQuery.fn.Collections.MyUI[obj.attr('id')]=obj;

This is outside of the create function, but within the (function($){...}) scope.
  1. //jQuery.fn.Collections is set to {} in another file.
  2. jQuery.fn.Collections.MyUI={};
  3. jQuery.fn.GetMyUI(id)
  4. {
  5.   return jQuery.fn.Collections.MyUI(id);
  6. }
This will allow the first block of code to work as desired, but it inserts a whole new set of bugs.

What are the common ways to achieve what I am trying to do?

Thanks,
-Jim