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

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

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

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

使用反向插入方法

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

$(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)

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

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

復制代碼代碼如下:

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

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

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

復制代碼代碼如下:

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

復制代碼代碼如下:

$(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>');

});

});

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

復制代碼代碼如下:

$(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>');

});

});