how to turn a function from function(element) syntax to $(element).function() syntax

Question

I have a function that accepts the element it needs to operate on as a parameter element

function changeColor(element){
   $(element).find('.middleBox').each(function(){
       $(this).//do some stuff that does not matter now;
   });
}

and I call it this way

changeColor($(document)); //this applies it to the whole document
changeColor($('#sectionOne')); //this applies it to only part of the document 

I want to change it from the format where it accepts its object as a param to this format. How do I do it

$('#sectionOne').changeColor();
$(document).changeColor();

Answer 1

As Nikita said, you need to write a jQuery plugin. Here's a basic example, which should be enough for what you are trying to do:

(function($) {
    $.fn.changeColor = function() {
        return this.each(function() {

            $(this).find('.middleBox').each(function() {
                $(this).//do some stuff that does not matter now;
            });

        });
    };
})(jQuery);

Answer 2

You want to create a jQuery plugin. jQuery folks provide a tutorial for that.

If you don't like reading much, you can practically copy-paste maxHeight example and replace logic inside.