jQuery教程(7)-DOM树操作之包装元素

文章标签: jquery-dom,jquery
2014-12-30 13:45:10     12 人阅读    

包装元素
脚注的编号可以直接在标记中添加,但在这里我们要利用标准的有序列表来生成序号。为此, 需要先创建一个用于包装所有脚注的<〇1>元素,并为每个脚注分别创建一个<li>元素。这时候 就要用到包装方法了。
要在一个元素中包装另一个元素,必须知道是把每个元素分别包装在各自的容器中,还是把 所有元素包装在一个容器中。考虑到要为每个脚注编号,我们需要实现这两种形式的包装,参见 代码清单5-10。
代码清单5-10

$(document).ready(function() {
$('span.footnote')
.insertBefore('#footer')
.wrapAll('<ol id="notes"></ol>')
.wrap('<li></li>');
});


把脚注插人到页脚前面后,我们使用.wrapAll()把所有脚注都包含在一个<ol>*。然后再 使用.wrap()将每一个脚注分别包装在自己的<li>*。从图5-7可以看出,这样就为脚注添加了 正确的编号。

 

 

 

图 5-7
     接下来,我们要考虑为提取脚注的位置加标记和编号了。为了简单起见,我们这次需要重写 现有的代码,不再依赖隐式迭代。
显式迭代
我们知道,.each()方法就是一个显式迭代器,与最近加人JavaScript语言中的数组迭代器 forEach()非常相似。如果在使用隐式迭代的情况下,我们想为每个匹配的元素应用的代码显得 太过复杂,就可以转而使用.each()。这个方法接受一个回调函数,这个函数会针对匹配的元素 集中的每个元素都调用一次,如代码清单5-11所示。
代码清单5-11

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

$(this).appendTo($notes).wrap('<li></li>');
});
});


这样修改的动机稍后大家就会明白。首先,需要理解传递给.each()回调的信息。
与其他回调函数(比如本章前面介绍的值回调函数)类似,在回调函数中,this关键字指 向当前正在操作的DOM元素,在代码清单5-11中,我们使用这个上下文创建了指向脚注<span> 的jQuery对象,将它添加到id为notes的 <。丄>中,最后把它封装在<li>X素里。
为了在正文中标记提取脚注的位置,可以利用.each()回调的参数。这个参数表示迭代的次 数,从0开始,每迭代一次就加1。因此这个数值始终都比当前的脚注编号小1。可以利用这个参 数在正文中生成适当的标签,如代码清单5-12所示。
代码清单5-12

$(document).ready(function() {
var $notes = $('<ol id=__notes__></ol>').insertBefore('#footer'); $('span.footnote').each(function(index) {
$('<sup>' + (index + 1) + '</sup>').insertBefore(this);
$(this).appendTo($notes).wrap('<li></li>');
});
});


这样,在脚注被从正文中提取出来并插人到页面底部之前,我们创建了一个包含脚注编号的 <sup>元素,并将它插人到正文中。这里的操作顺序十分重要。必须要在脚注被移动之前插人这 个编码,否则就找不到原始位置了。另外,还要注意表达式index+1必须放在括号中,这样才表 示是一个加法运算,因为“+”在JavaScript中也可以用于拼接字符串。
这时候再看看页面(参见图5-8),其中原来的脚注位置就出现了相应的编号。


图5-8


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

Java程序常用算法 ASCII 编码查看器   上一篇
下一篇  jQuery教程(6)-DOM树操作之移动元素

精彩回复
发表评论
姓名:       

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