Question

I’m creating jQuery plugin:

$.fn.myGrid = function () {

    return ???;
}

I want the return value of myGrid to include an add function, so that I can use it in the following way;

var grid = $(".myGrid").myGrid();
grid.add();

How can I do this? How I have to declare the add function? And what do I have to return in myGrid plugin?

I’d also be happy to have something that works like this;

$.myGrid.add();

Is it possible?

Answer 1

One approach you could use is this;

$.fn.myGrid = function () {
    var that = this;

    return {
        add: function () {
            that.after('<h2>Here I am, adding something'); // Note `that` rather than `this`.
        },
        remove: function () {
            that.next().remove();
        }
    };
}

It’s important to capture the this variable, because otherwise the methods on the object you return from your myGrid() function will not be able to access the jQuery object you invoked myGrid() on.

See the code in operation here; http://jsfiddle.net/HpeS8/