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


Posted in Javascript onJanuary 23, 2015

本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下:

使用反向插入方法

这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效。可是我们现在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容。此时,利 用反向插入方法,可以帮我们解决问题。

像.insertBefore()和.appendTo()这样的插人方法,一般都有一个对应的反向方法。反 向方法也执行相同的操作,只不过“目标”和“内容”正好相反。例如:

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

与下面的代码结果一样:

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

下面我们就使用.before()代替.insertBefore()来重构代码,参见如下代码:

$(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()方法的参数会变得复杂,所以有必要 在这里使用一种新的创建字符串的方法。
在上面的代码中,我们使用了 操作符来拼接字符串。使用+操作符虽然没有问题,但
如果要拼接的字符串太多,那看起来就会很乱。所以,我们在这里使用数组的.join()方法来构 建一个更大的数组。换句话说,下面的两行代码结果相同。

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

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

虽然这个例子要求输人更多字符,但使用.join()方法可以避免因要拼接的字符串过多而引 起混乱。下面我们再看看示例代码吧,如下代码就是使用.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属性,以便该链接有匹配的目标,参见如下代码:

$(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(),参见如下代码:

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

' (<a href="#context-', index + 1,

'__>context</a>)'

].join(''))

.wrap('<li id="footnote-' + (index + 1) + '__></li>');

});

});

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

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

Javascript 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 #Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 #Javascript
使用angular写一个hello world
Jan 23 #Javascript
Javascript中的几种URL编码方法比较
Jan 23 #Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 #Javascript
AngularJS语法详解(续)
Jan 23 #Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
原生js实现购物车
2020/09/23 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
python使用psutil模块获取系统状态
2016/08/27 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
法律进机关实施方案
2014/03/12 职场文书
校庆接待方案
2014/03/18 职场文书
推广普通话演讲稿
2014/05/23 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
大一新生期末自我评价
2014/09/12 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
工作简历自我评价
2015/03/11 职场文书
技术员岗位职责范本
2015/04/11 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server