object consisting of jQuery element

Question

hello,

current code

I've built function to do something over collection of jQuery elements:

var collection = $([]); //empty collection

I add them with:

collection = collection.add(e);

and remove with:

collection = collection.not(e);

It's pretty straightforward solution, works nicely.

problem

Now, I would like to have an object consisting of various settings set to any jQuery element, i.e.:

function addObject(e){
  var o = {
    alpha: .6 //float
    base: {r: 255, g: 255, b: 255} //color object
  }

  e.data('settings', o);
}

But when I pass jQuery object/element to function (i.e. as e), calling e.data doesn't work, although it would be simplest and really nice solution.

question

If I have an "collection" of jQuery elements, what is the simplest way of storing some data for each element of set?

Answer 1

If those "elements" are actual DOM elements (nodes), then can't you just use $(e).data(...)?

Answer 2

I think the problwm ia when youre dealing with a collection in this fashion and you add an item... if it hasnt been wrapped with jquery yet it wont be. Thus, when accessed again its simply the raw element.

If i am correct in this line of thinking an e is infact a dom element/node (or its string representation) then a simple $(e) should give you access to its data method.

function addObject(e){
  var o = {
    alpha: .6 //float
    base: {r: 255, g: 255, b: 255} //color object
  }

  $(e).data('settings', o);
}

Answer 3

Is it because you've missed a comma between your two properties?

  var o = {
    alpha: .6 <-- here 
    base: {r: 255, g: 255, b: 255} 
  }

(I doubt it, but felt the need to point it out)

This works, and is somewhat neater (IMO at least):

    $.fn.addObject = function(){
        var o = {
            alpha: .6, //float
            base: {r: 255, g: 255, b: 255} //color object
        }
         $(this).data('settings', o);
    };

    // simple test
    $("div").addObject();
    alert($("div").data("settings").alpha); // alerts 0.6

Answer 4

Ah, solved it already :)

last version:

This is somewhat simplified code:

function setData(e,key,data){
  if(typeof(e)==string){ e = $(e); }

   $(e).data(key,data);
}

solution

Problem was, that I wanted to keep myself option to add element via $('element'), 'element', or $(this), so I had to add typeof check before setting data - the same way jQuery works.

if I'm adding element as selector only, it's $(e), if I'm adding jQuery object, it's e:

function setData(e,key,data){
  if(typeof(e)==string){
    $(e).data(key,data);
  }else{
    e.data(key,data);
  }
}

So you all get upvote, and I'll pick myself as a winner in two days, so anyone who will stumble upon this question will know what to do (clearly, tested, works :]) and why :)

Edit: note: This probably isn't final version - I have read more documentation, so this setData function supports all types which jQuery.add supports.