Why doesn't $.each() iterate through every item?

Question

I have the following markup containing 10 pre elements with the class indent:

​<pre class="indent"></pre> <pre class="indent"></pre> <pre class="indent"></pre> <pre class="indent"></pre> <pre class="indent"></pre> <pre class="indent"></pre> <pre class="indent"></pre> <pre class="indent"></pre> <pre class="indent"></pre> <pre class="indent"></pre>​ 

I'm using the following jQuery .each() function to iterate through each element:

​$(function(){         $.each(".indent", function(index){        alert(index);      });     });​ 

I would expect to see 10 alerts, however I only see 7

-- See Fiddle --

---

However, this works as expected with $(".indent").each():

$(function(){         $(".indent").each(function(index){        alert(index);      });     });​ 

-- See Fiddle --

---

Looking at the $.each() documentation, I understand theres a difference:

The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object.

But I don't understand why in this instance, it doesn't iterate through all elements.

Why is this happening?

Answer 1

$.each(".indent", function(index){ 

doesn't iterate over the elements of $('.indent') but over the ".indent" string whose length is 7 chars.

See reference

---

A more detailed explanation based on jQuery source code :

jQuery first checks if the first parameter, obj (here your string), has a length :

var ...         length = obj.length,         isObj = length === undefined || jQuery.isFunction( obj ); 

Your string having a length (and not being a function), isObj is false.

In this case, the following code is executed :

for ( ; i < length; ) {     if ( callback.call( obj[ i ], i, obj[ i++ ] ) === false ) {         break;     } } 

So, given the function f, the following code

$.each(".indent", f); 

is equivalent to

for (var i=0; i<".indent".length; i++) {     var letter = ".indent"[i];     f.call(letter, i, letter); } 

(you can log the letters using var f = function(i,v){console.log(v)}; or be reminded one of the subtleties of call using var f = function(){console.log(this)};)

Answer 2

You are iterating through the string, you should pass an object or an array to $.each method:

$(function(){         $.each($(".indent"), function(index){        alert(index);     });     });