Add method onto a single jQuery node

Question

Say that I have two html nodes like this:

<div class='node a'>one</div>
<input class='node b' value='two'>

and I'd like to add a method for $('.node.a'), but not for node b. What I'd really like to do is something like this:

$('.node.a').addMethod('val', function() {
  return $('.node.b').val();
});

alert($('.node.a').val()); // alerts 'two'

Clearly I don't want to override the 'val' method for every jQuery node. Is it possible to do this?

* UPDATE *

As per mgibsonbr's suggestion, I wrote a jQuery plugin to do this for me. Instead of using jQuery data method, I only run different functionality if the node in question is the one being called. This means that this form will not work for jquery lists that match multiple html nodes. Here it is:

// overrides a method thats supposed to be called on a single node (a method like val)
$.fn.overrideNodeMethod = function(methodName, action) {
    var originalVal = $.fn[methodName];
    var thisNode = this;
    $.fn[methodName] = function() {
        if (this[0]==thisNode[0]) {
            return action.apply(this, arguments);
        } else {
            return originalVal.apply(this, arguments);
        }
    };
};

You *could* overload the `val()` to do this different behaviour if you wanted to. — alex, Jan 26 '12 at 23:23
Is there a particular reason you aren't putting an ID attribute on the elements and just directly referencing the one you want? — JohnFx, Jan 26 '12 at 23:25
Yes, because this is obviously a trivial example, and not exactly what I'm doing. I'm writing a plugin to transform a

score 1 · Accepted Answer · answered Jan 26 '12 at 23:35

1

The only way I know of adding node specific data is using the data method:

$('.node.a').data("val", function() {
    return $('.node.b').val();
});

alert($('.node.a').data("val")());

Not the syntax you wanted, but does the job. Another option is to overload val, as alex suggested. For instance, you could combine both approaches:

var oldVal = $.fn.val;
$.fn.val = function() {
    var custom = $(this).data("val");
    return custom ? custom.apply(this,arguments) : oldVal.apply(this,arguments);
};

alert($('.node.a').val()); // Now it works as intended

This way, val would work normally for most items, only behaving differently on those where you manually added a method.

answered Jan 26 '12 at 23:35

mgibsonbr

21,755
7
70
112

Something like that could work I think. I'm thinking if i override val, and only in the case that its the node i want, do the new functionality. – B T Jan 26 '12 at 23:46
That's basically what the example above does. Since you're writing a plugin, you could make the plugin code add the relevant `data` entry to the node(s) you want. This way you won't be restricted to a single node. Personally, however, I would just follow a common plugin pattern like the one described [here](http://www.learningjquery.com/2007/10/a-plugin-development-pattern), instead of messing with built-in functions. – mgibsonbr Jan 27 '12 at 00:04
Oh, see [this answer](http://stackoverflow.com/a/1117129/520779) also, might be of some help – mgibsonbr Jan 27 '12 at 00:08
Thanks, I wrote a plugin that allows me to do it and posted it in my question – B T Jan 27 '12 at 00:16

Add method onto a single jQuery node

1 Answers1