快捷導(dǎo)航

jQuery中DOM樹操作之使用反向插入方法實(shí)例分析

更新時(shí)間：2015年01月23日 11:01:36 投稿：shichen2014

這篇文章主要介紹了jQuery中DOM樹操作之使用反向插入方法,實(shí)例分析了反向插入方法與插入方法回調(diào)的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery中DOM樹操作之使用反向插入方法。分享給大家供大家參考。具體分析如下：

使用反向插入方法

這里我們先把創(chuàng)建的內(nèi)容插人到元素前面，然后再把同一個(gè)元素插人到文檔中的另一個(gè)位置。通常，當(dāng)在jQuery中操作元素時(shí)，利用連綴方法更簡潔也更有效?？墒俏覀儸F(xiàn)在沒有辦法這樣做，因?yàn)閠his是.insertBefore()的目標(biāo)，是.appendTo()的內(nèi)容。此時(shí)，利用反向插入方法，可以幫我們解決問題。

像.insertBefore()和.appendTo()這樣的插人方法，一般都有一個(gè)對應(yīng)的反向方法。反向方法也執(zhí)行相同的操作，只不過“目標(biāo)”和“內(nèi)容”正好相反。例如：

復(fù)制代碼代碼如下:

$('<p>Hello</p>').appendTo('#container');

與下面的代碼結(jié)果一樣：

復(fù)制代碼代碼如下:

$('#container').append('<p>Hello</p>');

下面我們就使用.before()代替.insertBefore()來重構(gòu)代碼，參見如下代碼：

復(fù)制代碼代碼如下:

$(document).ready(function() {

var $notes = $('<ol id="notes"></ol>')

.insertBefore('#footer');

$('span.footnote').each(function(index) {

$(this)

.before('<sup>' + (index + 1) + '</sup>')

.appendTo($notes)

.wrap('<li></li>');

});

});

插入方法回調(diào)

反向插入方法可以接受一個(gè)函數(shù)作為參數(shù)，與.attr()和.css()方法類似。這個(gè)傳入的函數(shù)會(huì)針對每個(gè)目標(biāo)元素調(diào)用，返回被插入的HTML字符串。在此其實(shí)也可以使用這個(gè)技術(shù)，但由于這樣就需要對每個(gè)腳注都重復(fù)一遍相同的操作，所以還是使用一個(gè).each()方法來得更清晰。

現(xiàn)在，我們可以考慮最后一步了：在正文中相應(yīng)的位置創(chuàng)建指向匹配腳注的鏈接和在腳注中創(chuàng)建指向正文位置的鏈接。為此，每個(gè)腳注需要4處標(biāo)記：兩個(gè)鏈接，一個(gè)在正文中，一個(gè)在腳注中；以及兩個(gè)id屬性。因?yàn)檫@樣一來，傳人.before()方法的參數(shù)會(huì)變得復(fù)雜，所以有必要在這里使用一種新的創(chuàng)建字符串的方法。
在上面的代碼中，我們使用了操作符來拼接字符串。使用+操作符雖然沒有問題，但
如果要拼接的字符串太多，那看起來就會(huì)很亂。所以，我們在這里使用數(shù)組的.join()方法來構(gòu) 建一個(gè)更大的數(shù)組。換句話說，下面的兩行代碼結(jié)果相同。

復(fù)制代碼代碼如下:

var str = 'a' + 'b' + 'c';

var str = ['a', 'b', 'c'].join('');

雖然這個(gè)例子要求輸人更多字符，但使用.join()方法可以避免因要拼接的字符串過多而引起混亂。下面我們再看看示例代碼吧，如下代碼就是使用.join()創(chuàng)建字符串的過程。

復(fù)制代碼代碼如下:

$(document).ready(function() {

var $notes = $('<ol id="notes"></ol>') .insertBefore('#footer'); $('span.footnote').each(function(index) { $(this)

.before([

'<sup>', index + 1,

'</sup>'

].join(''))

.appendTo($notes)

.wrap('<li></li>');

});

});

注意，由于數(shù)組的每個(gè)元素會(huì)分別執(zhí)行運(yùn)算，因此不再需要把index+1放在括號里了。使用這種技巧，可以為腳注標(biāo)簽添加一個(gè)指向頁面底部的鏈接和一個(gè)唯一的id值。同時(shí)在后面的方法中，也要給<li>元素中添加相應(yīng)的id屬性，以便該鏈接有匹配的目標(biāo)，參見如下代碼：

復(fù)制代碼代碼如下:

$(document).ready(function() {

var $notes = $('<ol id="notes"></ol>') .insertBefore('#footer'); $('span.footnote').each(function(index) { $(this)

.before([

'<a href="#footnote-', index + 1,

'"id="context-', index + 1,

'"class="context">',

'<sup>', index + 1,

'</sup></a>'

].join(''))

.appendTo($notes)

.wrap('<li id=Mfootnote-' + (index + 1) + IM></li>');

});

});

添加了這些標(biāo)記之后，每個(gè)腳注標(biāo)簽就有了指向頁面底部對應(yīng)腳注的鏈接。那么所剩的就是在腳注中創(chuàng)建一個(gè)指向其上下文的鏈接了。為此，可以使用.appendTo()的反向方法.append()，參見如下代碼：

復(fù)制代碼代碼如下:

$(document).ready(function() {

var $notes = $('<ol id="notes__></ol>')

.insertBefore('#footer');

$('span.footnote').each(function(index) {

$(this)

.before([

'<a href="#footnote-', index + 1,

'"id="context-', index + 1,

'"class = "context__>',

'<sup>', index + 1,

'</sup></a>'

].join(''))

.appendTo($notes)

.append([

'&nbsp;(<a href="#context-', index + 1,

'__>context</a>)'

].join(''))

.wrap('<li id="footnote-' + (index + 1) + '__></li>');

});

});