jQuery中DOM樹運算之使用反向插入方法實例分析_jquery

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

使用反向插入法

這裡我們先把創建的內容插人到元素前面，然後再把同一個元素插人到文件 中的另一個位置。通常，當在jQuery中操作元素時，利用連綴方法更簡潔也更有效。可是我們現在沒有辦法這樣做，因為this是.insertBefore()的目標，是.appendTo()的內容。此時，利 用反向插入法，可以幫我們解決問題。

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

複製程式碼 程式碼如下:

$('

Hello

').appendTo('# container');

與下面的程式碼結果一樣：

複製程式碼 程式碼如下:

$('#container').append('

Hello

');

下面我們就使用.before()代替.insertBefore()來重構程式碼，請參考以下程式碼：

複製程式碼 程式碼如下:

$(document).ready(function() {
var $notes = $('

')
.insertBefore('#footer');
$('span.footnote').each(function(index) {
$(this)
.before('^{' (index 1) '}')
.appendTo($notes)
.wrap('

');
});
});

插入方法回調

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

現在，我們可以考慮最後一步了：在正文中相應的位置創建指向匹配腳註的鏈接和在腳註中 創建指向正文位置的鏈接。為此，每個腳註需要4處標記：兩個鏈接，一個在正文中，一個在腳 註中；以及兩個id屬性。因為這樣一來，傳人.before()方法的參數會變得複雜，所以有必要 在這裡使用一種新的建立字串的方法。
在上面的程式碼中，我們使用了 操作符來拼接字串。使用 操作符雖然沒有問題，但
如果要拼接的字串太多，那看起來就會很亂。所以，我們在這裡使用陣列的.join()方法來構 建立一個更大的陣列。換句話說，下面的兩行程式碼結果相同。

複製程式碼 程式碼如下:

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

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

複製程式碼 程式碼如下:

$(document).ready(function() {
var $notes = $('

') .insertBefore('#footer'); $('span.footnote').each(function(index) { $(this)
.before([
'^{', index 1,
'}'
].join(''))
.appendTo($notes)
.wrap('

');
});
});

注意，由於陣列的每個元素會分別執行運算，因此不再需要把index 1放在括號裡了。 使用這種技巧，可以為腳註標籤添加一個指向頁面底部的連結和一個唯一的id值。同時在後 面的方法中，也要為

元素中加入對應的id屬性，以便該連結有相符的目標，請參考以下程式碼：

複製程式碼 程式碼如下:

$(document).ready(function() {
var $notes = $('

') .insertBefore('#footer'); $('span.footnote').each(function(index) { $(this)
.before([
'',
'^{', index 1,
'}'
].join(''))
.appendTo($notes)
.wrap('

');
});
});

新增了這些標記之後，每個腳註標籤就有了指向頁面底部對應腳註的連結。那麼所剩的就是 在腳註中建立一個指向其上下文的連結了。為此，可以使用.appendTo()的反向方 法.append()，請參閱以下程式碼：

複製程式碼 程式碼如下:

$(document).ready(function() {
var $notes = $('

'"id="context-', index 1,
'"class = "context__>',
'^{', index 1,
'}'
].join(''))
.appendTo($notes)
.append([
' (');
});
});

注意，這裡的href指向了腳註標籤中的id。在運行結果中，可以看到包含新連結的腳註。

希望本文所述對大家的jQuery程式設計有所幫助。