Using a function to update a value within the data() method of jQuery sets the variable equivalent to the anonymous function, not the return value

Question

I answered this question: Manipulate Custom Values with jQuery

With this jQuery:

$(\'img\').attr(\'u\', function(i,u) {
    /* i is the index of the curr         


        

Answer 1

Basically your expectation is wrong.

jQuery's .data does not modify the data attributes of the elements at all; it simply associates the data you provide with the element through a mechanism of its own choosing.

The implementation is intentionally left unspecified, and .data does not process this data at all; you put something in, and when you later ask for it that is exactly what you get back. The data is totally opaque from jQuery's perspective.

It's true that .data provides pre-population of an element's associated data from its HTML data- attributes as a convenience feature, but that is not its main mission. And of course the opaqueness of the data is still upheld in this case: when you ask for data, you get back exactly what was specified in the HTML.

Answer 2

If you need this capability, you can easily add it:

$.fn.fdata = function( name, callback ) {
    return this.each( function( i, element ) {
        var $element = $(element);
        var data = callback( i, $element.data(name) );
        $element.data( name, data );
    });
};

Now you can use $(sel).fdata( name, callback ); and do what you want in the callback.

It may be tempting to extend the existing $().data() method to add the callback capability, but as other pointed out, this would break any other code that depends on being able to store a function reference as data.

Of course, it's also possible that merely adding this .fdata() method could break other code - if some other code on your page also tries to use the same method name in its own plugin. So it may be wiser to make this a simple function instead. The code is almost identical either way:

function updateData( selector, name, callback ) {
    $(selector).each( function( i, element ) {
        var $element = $(element);
        var data = callback( i, $element.data(name) );
        $element.data( name, data );
    });
}

Answer 3

The difference between data and many of the other jquery functions (such as attr and many others) is that data can store any type of object. attr can only store string values. Because of this, it is completely valid to want to store a function using data.

If the jquery team were to make a similar signature for data, they would need to somehow distinguish between wanting to store the function and wanting to evaluate the function. It would likely get too confusing so they just did not include the ability to execute the function.

I think the best you can do is to use each.