JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<ul>
    <li>
    </li>
    <li>
    </li>
    <li>
    </li>
</ul>

JavaScript

(function($){
    var public_methods = {
        init: function( options ){
            var settings = {
                background: 'red'
            }
                
            settings = $.extend({},settings,options);

           return $(this).children().each(function(i){
                $(this).css({'background-color' : settings.background});
                $(this).html(i);
            });
        },
        saySomething: function(words){
            return $(this).children().each(function(i){
                $(this).html(words + " " + i);
            });   
        }
    };
    
 
    
    $.fn.pluginize = function( method ){
        if(public_methods[method]){
          public_methods[method].apply(this,Array.prototype.slice.call(arguments,1));
        }  
        else if(typeof method === 'object' || method === undefined){
            public_methods.init.apply(this,arguments);
        }                               
    };
})(jQuery);

$("ul").pluginize({background : 'blue'});
$("ul").pluginize('saySomething','Hello World');