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

2015-11-13 admin

本文实例讲述了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。运行结果中,可以看到包含新链接的脚注。

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-282.html

文章标题:jQuery中DOM树操作之使用反向插入方法实例分析

相关文章
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
回到顶部