jquery - 在 jquery 插件中追加 n 次

Question

我正在尝试制作一个 jquery 插件

(function($){
    $.fn.myPlugin= function(opt){
        var defaults = {      
            num : '5';
        };

        return this.each(function(){
            var opt = $.extend(defaults, opt);   
            var template=$('<span class="active">aaaa</span>');
        });
    };
})(jQuery);

如何将模板num次数附加到$(this). 除了 for 循环之外还有其他方法吗，因为我认为为应用插件的每个项目运行 for 循环会产生问题并使页面超载。如我错了请纠正我..

Answer 1

变化不大

1. 您将需要使用循环来创建模板的副本
2. 您可以将模板的创建移到this.each()循环之外，以便在每次插件初始化时执行一次循环（即$('div').myplugin()只执行一次循环）
3. 使用数组创建模板副本
4. 在each循环中附加模板的锥形副本

像这样的东西

(function ($) {
    var defaults = {
        num: 5
    };
    var template = '<span class="active">aaaa</span>';
    $.fn.myPlugin = function (opt) {
        var opt = $.extend(defaults, opt),
            array = [],
            $tmpl;
        for (var i = 0; i < opt.num; i++) {
            array.push(template);
        }
        $tmpl = $(array.join(''));


        return this.each(function () {
            $(this).append($tmpl.clone())
        });


    };
})(jQuery);

演示：小提琴