CODEWITHSUNDEEP
javascriptjqueryframeworks
Sawny
Sawny

Reputation: 1423

How does jQuerys $.each() work?

Maybe a bad title, but this is my problem: I'm building a framework to learn more about javascript. And I want to use ""jQuery"" style.

How can I make a function where the () is optional?

$("p").fadeOut(); //() is there
$.each(arr, function(k, v) {...}); //Dropped the (), but HOW?

This is what I have come up with, but it don't work:

$2DC = function(selector)
{
    return new function() {
        return {
            circle : function()
            {
                //...
            }
        }
    }
}


$2DC("#id1"); //Work
$2DC("#id2").circle(); //Work
$2DC.circle(); //DONT WORK

Upvotes: 9

Views: 425

Answers (7)

Adam Rackis
Adam Rackis

Reputation: 83366

$ is really just an alias for the jQuery function. You can call the function with:

jQuery("p"); or $("p");

but remember, in JavaScript you can attach "stuff" directly to functions.

function foo(){
}
foo.blah = "hi";
foo.func = function() { alert("hi"); };

foo.func(); //alerts "hi"

This is how (conceptually) jQuery's each function is defined.

jQuery.each = function(someArr, callback) { ...

And so now jQuery.each is a function that can be called like this:

jQuery.each([1, 2, 3], function(i, val) {
});

or the more familiar

$.each([1, 2, 3], function(i, val) {
});

So for your particular case, to support:

$2DC.circle();

You'd have to add the circle function directly to $2DC:

$2DC.circle = function(){
   // code
};

Upvotes: 23

wheresrhys
wheresrhys

Reputation: 23530

It can be achieved using something like this.

$.fn.each = function (otherparams);

$.each = function (collection, otherparams) {
  return $.fn.each.apply(collection, arguments.slice(1));
};

Adding each as a property of fn (which is just an alias for jQuery.prototype) means it's available as a method of each jQuery collection. The second bit of code means it can be passed in a collection as an argument instead.

apply (and call) are some of the most useful features of javascript once you get used to them.

Upvotes: 0

Russ Cam
Russ Cam

Reputation: 125518

The $.each method that you refer to is a property on the $ function object.

The $ object in jQuery is a function object and like any object in JavaScript, you can assign properties on the object.

Invoking the $ function object acts as a constructor function and returns a new object instance created by the jQuery.fn.init() function. The prototype of jQuery is copied to jQuery.fn.init so that newly created object instances have access to the methods and plugins defined on jQuery.

Upvotes: 0

Will Stern
Will Stern

Reputation: 17589

Create your base function, then add methods to the function.

var f = function(text){
    alert(text);
}
f.fn1 = function(text){
    alert('fn:'+text);
}
f.fn2 = function(text){
    alert('fn2:'+text);
}

f('hi'); //hi;
f.fn1('hi'); //fn:hi;
f.fn2('hi'); //fn2:hi;

Upvotes: 0

André Alçada Padez
André Alçada Padez

Reputation: 11618

Try it like this:

$2DC = (function(selector)
{
    return new function() {
        return {
            circle : function()
            {
                //...
            }
        }
    }
})();

this way the $2DC is the object returned by the function and not the function itself.

Upvotes: -1

ShankarSangoli
ShankarSangoli

Reputation: 69915

$2DC.circle(); //DONT WORK

This didn't work because $2DC do not have any function with name circle. It is just a function.

Where as $2DC("#id2") returns a new function containing object having circle function so $2DC("#id2").circle(); works fine for you.

If you define

$2DC.circle = function(){

};

You can use $2DC.circle();

Upvotes: 1

gen_Eric
gen_Eric

Reputation: 227280

Functions are objects in JavaScript. As such, they can be used as variables, just like ints, strings, etc.

In your example, $2DC is a function that returns an object containing a circle function.

$2DC.circle(); doesn't work as circle is only a property of the returned object, not of $2DC itself.

In the case of $.each, this works as $ contains an each property. Your $2DC can do that too. Like this:

$2DC.circle = function(){
}

Now, $2DC.circle(); will work. So, as you see functions are objects, and as such can have properties just like other objects.

Upvotes: 6

Related Questions