jquery - 制作了一个 jquery 插件，它可以工作，但我还有最后一件事我想不通

Question

我试着四处寻找答案，但我不知道如何在没有先解释的情况下说出它。无论如何，这是我如何调用插件的示例：

$('body').myPlugin({container: 'exampleA', amount:4});

问题是，在哪里说“身体”似乎没用，我可以在那里放置任何元素并且效果很好。我宁愿它说类似......

$('.exampleA').myPlugin({amount:4});

...然后告诉插件使用 exampleA 作为容器。我认为这确实可能是正确的吗？我将如何修改我的插件来实现这一点？

这是我的插件的一个例子：

(function($){
 $.fn.extend({
     myPlugin: function(options) {
        var defaults = {
            container : 'list_container',
            amount : 2
        }
        var options =  $.extend(defaults, options);
        return this.each(function() {
            var o = options;
            //Start
            $('.'+o.container+' ul').each(function(){
               //DO STUFF HERE....
            });
            //End
        });
    }
});
})(jQuery);

如果需要，我可以发布实际的代码/插件，我只是认为如果我发布一个简单的示例可能更容易解释我正在尝试做什么。

Answer 1

(function($){
 $.fn.extend({
 myPlugin: function(options) {
    var defaults = {
        container : 'list_container',
        amount : 2
    }
    var options =  $.extend(defaults, options);
    return this.each(function() {
        var o = options;
        //Start
        $(this).children('ul').each(function(){
           //DO STUFF HERE....
        });
        //End
    });
}
});
})(jQuery);

Answer 2

this在您的插件中是 jQuery 选择。如果您find在此集合上使用，则应将其范围限定为选定元素内的容器。

$.fn.extend({
    myPlugin: function(options) {
        var defaults = {
            container : 'list_container',
            amount : 2
        }
        var options =  $.extend(defaults, options);
        this.find('.' + options.container + ' ul').each(function(){
           //DO STUFF HERE....
        });
    });
}

Answer 3

$.fn.myPlugin = function (options) {
    var defaults = {
        amount: 2
    }
    var options = $.extend(defaults, options);
    return this.each(function () {
        $('ul', this).each(function () {
            //DO STUFF
        });
    });
}

小提琴