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 相关文章推荐
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
js实现简易聊天对话框
Aug 17 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 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
Zend Guard一些常见问题解答
2008/09/11 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
微信小程序中setInterval的使用方法
2017/09/29 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
vue实现防抖的实例代码
2021/01/11 Vue.js
JavaScript实现点击切换功能
2021/01/27 Javascript
Python max内置函数详细介绍
2016/11/17 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
戴尔美国官网:Dell
2016/08/31 全球购物
小学美术教学反思
2014/02/01 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
校长新学期寄语2016
2015/12/04 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技