jquery - $(element).each() 在幕后发生了什么？

Question

我有一些代码是：

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

和

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

第一个和第二个代码片段在幕后发生了什么？我注意到第二个工作得更快，并给出与第一个相同的结果。

Answer 1

一方面，在第一个片段中，您为结果中的每个元素创建了一个单独的 jQuery 对象。我猜这与花费的额外时间有关。

Answer 2

在一个简单的行中，使用给定的选择器在.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()inside .each()then.on()也将.each()为该元素本身运行。