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 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
JS实现简易留言板特效
Dec 23 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
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Django 路由系统URLconf的使用
2018/10/11 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
python3 配置logging日志类的操作
2020/04/08 Python
python实现xml转json文件的示例代码
2020/12/30 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
消防器材管理制度
2014/01/28 职场文书
人事主管岗位职责
2015/02/04 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android