javascript - jQuery: Extend a DOM element with custom methods

Question

I have a couple of dom elements acting as placeholders for custom widgets. I'd like to extend them to give each type of widget a "setvalue" function like this:

$.fn.extend($(".dial"), { setval: function(val) { });

I don't want to extend jQuery.fn itself as different ypes of widgets require different setval methods.

Is there a way to extend DOM elements of a particular type instead of extending jQuery.fn itself?

Answer 1

You can do this, however, said method may get lost when using other methods on said element. It would be better to implement the method on the element's data object, or on the widget itself.

$(".dial").each(function(){
    $(this).data("setval",$.proxy(function(val){
        this.value = sanitize(val);
    },this));
}).eq(0).data("setval")("foobar");

Answer 2

The comments above have brought me to this approach using jQuery UI:

var WidgetDial = {
    _init: function() { ... },

    value: function(val) { ... },
};

$.widget("ui.widgetDial", WidgetDial);
$("#dial1").widgetDial();
$("#dial1").widgetDial("value", 30);