JQuery中有一個(gè)非常有用的函數(shù)叫做after，其主要作用是在某個(gè)元素的后面插入新的元素。今天我們來(lái)探討一下jquery after函數(shù)的源碼實(shí)現(xiàn)。

jQuery.fn.extend({
after: function() {
var elems = [],
args = arguments,
i, j, len, node, first;
for (i = 0, len = args.length; i< len; i++) {
node = args[i];
if (node && node.nodeType) {
elems.push(node);
} else {
jQuery.merge(elems, jQuery.parseHTML(node));
}
}
if ((j = this.length) >1) {
for (var k = 0; k< j; k++) {
first = elems[0].cloneNode(true);
jQuery.cleanData(getAll(first));
if (this[k].parentNode) {
this[k].parentNode.insertBefore(first, this[k].nextSibling);
}
for (i = 1; i< elems.length; i++) {
node = elems[i].cloneNode(true);
jQuery.cleanData(getAll(node));
this[k].parentNode.insertBefore(node, this[k].nextSibling);
}
}
} else {
first = elems[0].cloneNode(true);
jQuery.cleanData(getAll(first));
this[0].parentNode.insertBefore(first, this[0].nextSibling);
for (i = 1; i< elems.length; i++) {
node = elems[i].cloneNode(true);
jQuery.cleanData(getAll(node));
this[0].parentNode.insertBefore(node, this[0].nextSibling);
}
}
return this;
}
});

首先，在這段源碼中我們可以看到它擴(kuò)展了jquery的fn對(duì)象，使得after方法可以直接被jquery對(duì)象調(diào)用。在函數(shù)內(nèi)部，首先定義了一些變量用于存儲(chǔ)函數(shù)參數(shù)和元素節(jié)點(diǎn)。 接下來(lái)的for循環(huán)中，遍歷傳入的參數(shù)并判斷每個(gè)參數(shù)是否為原生節(jié)點(diǎn)，如果是的話則將其直接存在一個(gè)數(shù)組中，否則通過(guò)parseHTML方法將其轉(zhuǎn)換為原生節(jié)點(diǎn)后再存儲(chǔ)到數(shù)組中。 在后面的if語(yǔ)句中，判斷當(dāng)前jquery對(duì)象的長(zhǎng)度是否大于1，如果是的話則需要在每個(gè)節(jié)點(diǎn)后面都插入新的元素。通過(guò)cloneNode方法將第一個(gè)新元素克隆一份，然后調(diào)用cleanData方法清空所有DOM子節(jié)點(diǎn)上的事件和數(shù)據(jù)，并將其插入到第一個(gè)原生節(jié)點(diǎn)的后面。接著遍歷元素?cái)?shù)組并重復(fù)以上過(guò)程。 如果當(dāng)前jquery對(duì)象的長(zhǎng)度等于1，那么只需要在當(dāng)前節(jié)點(diǎn)后面插入新元素即可。 最后返回jquery對(duì)象以實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用。