Что происходит за кулисами с помощью $ (element) .each()?

Question

У меня есть некоторый код, который:

$('.someClass').each(function() { 
    $(this).on(...); 
}); 

и

$('.someClass').on(...); 

Что происходит за кулисами с первыми и вторыми фрагментами кода? Я заметил, что второй работает намного быстрее и дает те же результаты, что и первый.

Answer 1

В простой строке .on() внутренняя функция .each() для привязки события к данному селектору (как ваш код .someClass).

См фрагмент .on():

on: function(types, selector, data, fn, /*INTERNAL*/ one) { 
    var type, origFn; 

    // Types can be a map of types/handlers 
    if (typeof types === "object") { 
     // (types-Object, selector, data) 
     if (typeof selector !== "string") { 
      // (types-Object, data) 
      data = data || selector; 
      selector = undefined; 
     } 
     for (type in types) { 
      this.on(type, selector, data, types[ type ], one); 
     } 
     return this; 
    } 

    if (data == null && fn == null) { 
     // (types, fn) 
     fn = selector; 
     data = selector = undefined; 
    } else if (fn == null) { 
     if (typeof selector === "string") { 
      // (types, selector, fn) 
      fn = data; 
      data = undefined; 
     } else { 
      // (types, data, fn) 
      fn = data; 
      data = selector; 
      selector = undefined; 
     } 
    } 
    if (fn === false) { 
     fn = returnFalse; 
    } else if (!fn) { 
     return this; 
    } 

    if (one === 1) { 
     origFn = fn; 
     fn = function(event) { 
      // Can use an empty set, since event contains the info 
      jQuery().off(event); 
      return origFn.apply(this, arguments); 
     }; 
     // Use same guid so caller can remove using origFn 
     fn.guid = origFn.guid || (origFn.guid = jQuery.guid++); 
    } 
    return this.each(function() { 
     jQuery.event.add(this, types, fn, data, selector); 
    }); 
} 

Так что, если вы идете через первый фрагмент вашего кода, т.е.. посредством вызова .on() в пределах .each(), тогда .on() будет запускать .each() для этого элемента и сам.

Answer 2

С одной стороны, в первом фрагменте вы создаете отдельный объект jQuery для каждого элемента в результате. Я предполагаю, что это имеет какое-то отношение к дополнительному времени.