{{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 );
});
},