{{jQuery源码分析}}.wrapAll,.wrapInner,.wrap方法

{{jQuery源码分析}}.wrapAll方法

jQuery.fn.extend({
    wrapAll: function( html ) {
        // 当html参数为function时，对每个jQuery对象都调用jQuery(this).wrapAll(html.call(this, i));
        if ( jQuery.isFunction( html ) ) {
            return this.each(function(i) {
                jQuery(this).wrapAll( html.call(this, i) );
            });
        }

        if ( this[0] ) {
            // The elements to wrap the target around
            // 首先生成html的jQuery对象拷贝wrap
            var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);

            // 将当前this的第一个元素前插入wrap结点，保证wrap是document的结点
            if ( this[0].parentNode ) {
                wrap.insertBefore( this[0] );
            }

            // 找到wrap的叶子结点,将当前this所指向的DOM结点追加插入到wrap中的叶子结点
            wrap.map(function() {
                var elem = this;

                // 若wrap中含有第一个子结点且为元素结点，则递归查询直到最后一个子结点，将当前this所指向的DOM结点插入到wrap中的最后一个子结点
                while ( elem.firstChild && elem.firstChild.nodeType === 1 ) {
                    elem = elem.firstChild;
                }

                return elem;
            }).append( this );
        }

        // 返回this使用链式写法
        return this;
    }

});

由此分析.wrapInner,.wrap方法就容易多了。

wrapInner: function( html ) {
    if ( jQuery.isFunction( html ) ) {
        return this.each(function(i) {
            jQuery(this).wrapInner( html.call(this, i) );
        });
    }


    // 在每一个jQuery对象中取其contents,若内容contents不为空,则在内容contents外包装一层html;若内容contents为空,则将html直接插入到当前jQuery对象中
    return this.each(function() {
        var self = jQuery( this ),
            contents = self.contents();


        if ( contents.length ) {
            contents.wrapAll( html );


        } else {
            self.append( html );
        }
    });
},


wrap: function( html ) {
    var isFunction = jQuery.isFunction( html );


    // 在每一个匹配的jQuery对象外都包装一层html
    return this.each(function(i) {
        jQuery( this ).wrapAll( isFunction ? html.call(this, i) : html );
    });
},