javascript - 从插件的辅助功能访问 jQuery 对象

Question

我正在编写一个 jQuery 插件，该插件具有辅助功能(请参阅 jQuery support )。我希望能够循环 jQuery 对象包含的元素，以便对每个元素执行某些操作。但是，我看不到如何访问原始对象，因为在辅助函数的范围内，this 显然指的是插件对象。

有什么方法可以访问原始元素，还是我必须开始考虑替代(jQuery UI 式)技术？

代码看起来像这样:

(function ($) {
    'use strict';
    var
        myNewPlugin,
        mySecondaryFunction;

    mySecondaryFunction = function () {
        // the secondary function

        // `this` refers to myNewPlugin
    };

    myNewPlugin = (function () {
        var closedPrivateVariables;

        return function () {
            // the function called from the jQuery object

            return this;
        };
    }());

    myNewPlugin.mySecondaryFunction;

    $.fn.myNewPlugin = myNewPlugin;
}(jQuery));

不重复(听起来相似但不相同的问题)

• jQuery plugin: How to access elements where plugin was applied from secondary function?
• JQuery and Secondary Functions in plugins

Answer 1

标准插件模式是这样的:

(function ($) {
    $.fn.myPlugin = function (options) {
        var settings = {
            // settings
        };
        return this.each(function (i, elem) {
            //do stuff
        });
    };
})(jQuery);

要扩展辅助函数并维护对所选 jQuery 对象的引用，只需在 .each() 迭代器中捕获对其的引用:

(function ($) {
    $.fn.myPlugin = function (options) {
        var settings = {
            // settings
        },
        self = null,
        selectedDOMElements = [],
        mySecondaryFunction = function () {
            var i = 0;
            //do more stuff
            self.css('display', 'inline-block'); //original jQuery object
            for (i = 0; i , selectedDOMElements.length; i += 1) {
                $(selectedDOMElements[i]).css('color', '#F00'); //individual child elements of the original jQuery object
            }
        };
        self = this; //store original jQuery object
        return this.each(function (i, elem) {
            selectedDOMElements.push(elem); //store individual child elements of the original jQuery object
            //do stuff
        });
    };
})(jQuery);

混合搭配来完成您想做的事情。

更新:

试试这个:

(function ($) {
    var self;
    $.fn.myPlugin = function (options) {
        var settings = {
            // settings
        };
        self = this; //store original jQuery object
        return self.each(function (i, elem) {
            //do stuff
        });
    };
    $.fn.myPlugin.mySecondaryFunction = function mySecondaryFunction(options) {
        var settings = {
            // settings
        };
        return self.each(function (i, elem) { //apply to original jQuery object
            //do stuff
        });
    };
})(jQuery);

//call like this
$(selector).myPlugin();
$(selector).myPlugin.mySecondaryFunction();

fiddle 示例:http://jsfiddle.net/bv7PG/