Accessing this variable in jQuery plugin

Question

I'm trying to access the "this" variable in my plugin but I keep getting the error Uncaught ReferenceError: $self is not defined. I don't really understand what I'm doing wrong and this is the first time I've tried building a plugin this way.

I've looked at other plugins that follow this pattern but I'm not seeing what I'm missing compared to theirs.

Codes:

;(function($) {

    $.fn.videoPagination = function(method) {

        // Method calling logic
        if (methods[method] && method.charAt(0) != '_') {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.videoPagination');
        }

    };

    var methods = {

        init: function(options) {
            var o = $.extend({
                per_page: 12,
                current_page: 1,
                src: '/videos.json'
            }, options || {});

            var $self = $(this);
            $self.data('videoPagination', o);

            methods.cover();
            return this;
        },

        cover: function() {
            $self.find('article').each(function(i) {
                var video = $(this);
                setTimeout(function() {
                    video.fadeTo(250, .2);
                }, 50*i);
            });
        }
    };

})(window.jQuery);

$('.videos').videoPagination();

Answer 1

The problem is not with your use of this but is actually with your scoping of the $self variable, see the comments I added below:

var methods = {

    init: function(options) {
        var o = $.extend({
            per_page: 12,
            current_page: 1,
            src: '/videos.json'
        }, options || {});

        var $self = $(this); //You are defining the $self variable here inside the scope of the init function
        $self.data('videoPagination', o);

        methods.cover();
        return this;
    },

    cover: function() {
        $self.find('article').each(function(i) { // then trying to use it here inside the scope of the cover function.
            var video = $(this);
            setTimeout(function() {
                video.fadeTo(250, .2);
            }, 50*i);
        });
    }
};

Instead you need to declare the variable in a larger scope so that you can set and access it in both locations:

(function($) {

$.fn.videoPagination = function(method) {

    // Method calling logic
    if (methods[method] && method.charAt(0) != '_') {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method ' +  method + ' does not exist on jQuery.videoPagination');
    }

};

var $self; //notice that $self is now declared outside of both functions.
var methods = {

    init: function(options) {
        var o = $.extend({
            per_page: 12,
            current_page: 1,
            src: '/videos.json'
        }, options || {});

        $self = $(this);
        $self.data('videoPagination', o);

        methods.cover();
        return this;
    },

    cover: function() {
        $self.find('article').each(function(i) {
            var video = $(this);
            setTimeout(function() {
                video.fadeTo(250, .2);
            }, 50*i);
        });
    }
};

})(window.jQuery);

$('.videos').videoPagination();