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

$(document).ready(function() {
var $notes = $(‘<ol id=”notes”></ol>’) .insertBefore(‘#footer’); $(‘span.footnote’).each(function(index) { $(this)
.before([
‘^{’, index + 1,
‘}’
].join(”))
.appendTo($notes)
.wrap(‘<li></li>’);
});
});

注意，由于数组的每个元素会分别执行运算，因此不再需要把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”>’,
‘^{’, index + 1,
‘}</a>’
].join(”))
.appendTo($notes)
.wrap(‘<li id=Mfootnote-‘ + (index + 1) + IM></li>’);
});
});

添加了这些标记之后，每个脚注标签就有了指向页面底部对应脚注的链接。那么所剩的就是 在脚注中创建一个指向其上下文的链接了。为此，可以使用.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__>’,
‘^{’, index + 1,
‘}</a>’
].join(”))
.appendTo($notes)
.append([
‘ (<a href=”#context-‘, index + 1,
‘__>context</a>)’
].join(”))
.wrap(‘<li id=”footnote-‘ + (index + 1) + ‘__></li>’);
});
});

注意，这里的href指向了脚注标签中的id。运行结果中，可以看到包含新链接的脚注。

希望本文所述对大家的jQuery程序设计有所帮助。