jQuery教程(8)-DOM树操作之使用反向插入方法

文章标签: jquery,jquery-dom
2015-1-4 17:51:41     52 人阅读    

使用反向插入方法
         在代码清单5-12中,我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效。可是我们现 在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容。此时,利 用反向插入方法,可以帮我们解决问题。
        像.insertBefore()和.appendTo()这样的插人方法,一般都有一个对应的反向方法。反 向方法也执行相同的操作,只不过“目标”和“内容”正好相反。例如:

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


与下面的代码结果一样:

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


下面我们就使用.before()代替.insertBefore()来重构代码,参见代码清单5-13。
代码清单5-13

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


插入方法回调


        反向插入方法可以接受一个函数作为参数,与.attr()和.css()方法类似。 这个传入的函数会针对每个目标元素调用,返回被插入的HTML字符串。在此其 实也可以使用这个技术,但由于这样就需要对每个脚注都重复一遍相同的操作, 所以还是使用一个.each()方法来得更清晰。

         现在,我们可以考虑最后一步了:在正文中相应的位置创建指向匹配脚注的链接和在脚注中 创建指向正文位置的链接。为此,每个脚注需要4处标记:两个链接,一个在正文中,一个在脚 注中;以及两个id属性。因为这样一来,传人.before()方法的参数会变得复杂,所以有必要 在这里使用一种新的创建字符串的方法。
         在代码清单5-13中,我们使用了 操作符来拼接字符串。使用+操作符虽然没有问题,但
如果要拼接的字符串太多,那看起来就会很乱。所以,我们在这里使用数组的.j〇in()方法来构 建一个更大的数组。换句话说,下面的两行代码结果相同。

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


         虽然这个例子要求输人更多字符,但使用.join()方法可以避免因要拼接的字符串过多而引 起混乱。下面我们再看看示例代码吧,代码清单5-14就是使用.join()创建字符串的过程。

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


        注意,由于数组的每个元素会分别执行运算,因此不再需要把index+1放在括号里了。 使用这种技巧,可以为脚注标签添加一个指向页面底部的链接和一个唯一的id值。同时在后 面的方法中,也要给<li>元素中添加相应的id属性,以便该链接有匹配的目标,参见代码清单5-15。
代码清单5-15

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


         添加了这些标记之后,每个脚注标签就有了指向页面底部对应脚注的链接。那么所剩的就是 在脚注中创建一个指向其上下文的链接了。为此,可以使用.appendTo()的反向方 法.append(),参见代码清单5-16。
代码清单5-16

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


注意,这里的href指向了脚注标签中的id。在图5-9中,可以看到包含新链接的脚注。

 


图5-9


原文地址:http://www.itmmd.com/201501/437.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

mysql 索引类型详解-B-Tree索引   上一篇
下一篇  Java程序常用算法 ASCII 编码查看器

精彩回复
#1楼    ; [评论人]:豆腐干梵蒂冈   [发表时间]:2015-1-5 16:02:33

跌幅达股份大股东国

发表评论
姓名:       

《程序员app》专门为程序员量身定做!