Add jQuery function to specific elements

Question

I know that you can add new jQuery functions by $.fn.someFunction = function()

However, I want to add functions to specific elements only. I tried this

Answer 1

If you're wanting this function only for particular selectors, the following will work for you. I've just had a scenario where I've needed this and it works nicely.

$('.my-selector').each(function(){

    $(this).init.prototype.getUrl = function(){
        // do things
    };
})

then later on you can do

$('.my-selector').getUrl()

without having to define it as a plugin, or use data or bind/on/trigger events.

Obviously you can change the function to return the containing object if you want to use it in chaining by returning this

$('.my-selector').each(function(){

    $(this).init.prototype.getUrl = function(){
        // do things
        return this;
    };
})