jQuery each() - How does it work really internally? [closed]

Answer 1

Check out lines 566 to 605 in the source

It is iterative and fairly straightforward.

Answer 2

As far as I'm aware, this

$('selector').each(func);

is the equivalent of doing this:

func = ...;
$selector = $('selector');
for (var i = 0; i < $selector.length; i++) {
    if (func.call($selector[i], i, $selector[i]) === false) {
        break;
    }
}

The object returned by a $ selection is actually an array of DOM elements with a whole bunch of extra methods attached to it, so you basically can work with it just like you would an Array. Hope that clears things up!

Answer 3

No, it is not recursive. The function on line 222 is the one on jQuery's prototype ($.fn), while the function it calls is jQuery.each - a static property which is defined in line 566. Notice how extend works: If no object to extend is given, it uses this. It is both applied on jQuery and jQuery.fn in different sections of the code.

so how exactly does this work?

$obj.each(callback) is calling the $.fn.each method, which applies $.each on the jQuery instance (the DOM wrapper) itself: line 223.

Now, in $.each, there are four cases: With or without supplied args array, and on an array-like structure or on other objects. You didn't pass additional args, and jQuery instances have a length property and have the DOM elements in numeric indices, so the loop in line 596 will be executed. So your call is equivalent to

for (var i=0, len=$obj.length; i<len; i++)
    if ( callback.call($obj[i], i, $obj[i]) === false ) break;

Answer 4

Each query you do in jQuery is stored as an Array like object, meaning you can access the list of DOM elements your query has found by doing this:

$('.item')[0] //The first item found by your query

Internally, $().each uses $.each, which is a way of iterating through your collection, calling the function you've passed as the argument, and using 'Function.apply' to set 'this' to be the current object being iterated through.