I have an element as <div id="#test"></div>

I want add a method Do to it, so I could call $(‘#test’).Do();

I don’t want to use universal plugin $.fn.Do(), since it will add Do method to all jquery elements.

code like

$('#test').Do = function() { ... };

won’t work,

var $div = $('#test');
$div.Do = function() { ... }

$div.Do() // this works

$('#test').Do() //this won't work

still not work as intended.

So, only workaround I can think is use .bind()/.trigger() combo, is there a better way to do this?

There is a easier way to do this. You can extend jquery itself like following.

http://stackoverflow.com/questions/5023808/easier-way-to-add-methods-to-jquery-objects-than-data

Sorry, as I said in my first example, I don’t want to extend jquery itself, I just want to extend one DOM element.

as some one use $.extend(), it is fallen part as my second example, each time I call $(selector) it return a newly wrapped object, so the extended method attached to previous object will be lost when I call $(selector) again.

$(‘#test’) always return a new query object (extended array) instance, so you must keep function. if you want to just attach a function to a dom object, attach it the dom object, not the jquery object.

var $div = $('#test');
$div[0].Do = function() { ... }

$div[0].Do() // this works

$('#test')[0].Do() //this will work too