Почему переменная $.each() не проходит через каждый элемент?

У меня есть следующая разметка, содержащая 10 pre элементов с классом 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>

Я использую следующую функцию jQuery .each() для итерации по каждому элементу:

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

Я ожидаю увидеть 10 предупреждений, однако я вижу только 7

- см. Fiddle -

Однако, это работает как ожидалось с помощью $(".indent").each():

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

- см. Fiddle -

Глядя на документацию $.each(), я понимаю, что это разница:

Функция $.each() не совпадает с $(селектором).each(), которая является используется для итерации исключительно над объектом jQuery.

Но я не понимаю, почему в этом случае он не перебирает все элементы.

Почему это происходит?

Ответ 1

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

не перебирает элементы $('.indent'), а поверх строки ".indent" длиной 7 символов.

См. ссылка

Более подробное объяснение, основанное на исходный код jQuery:

jQuery сначала проверяет, имеет ли первый параметр obj (здесь ваша строка) length:

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

Ваша строка, имеющая length (и не являющаяся функцией), isObj равна false.

В этом случае выполняется следующий код:

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

Итак, учитывая функцию f, следующий код

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

эквивалентно

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

(вы можете записать буквы с помощью var f = function(i,v){console.log(v)}; или напомнить одну из тонкостей call с помощью var f = function(){console.log(this)};)

Ответ 2

Итерируя по строке, вы должны передать объект или массив методу $.each:

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

Ответ 3

$, каждый из которых выполняет итерацию по набору данных. Поскольку вы передаете строку, содержащую 7 символов, она будет перебираться для каждого char. См. Пример использования:

$.each([52, 97], function(index, value) { 
  alert(index + ': ' + value); 
});