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

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

使用反向插入方法

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

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

$('

Hello

').appendTo('#container');

与下面的代码结果一样:

$('#container').append('

Hello

');

下面我们就使用.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值。同时在后 面的方法中,也要给

  • 元素中添加相应的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源码分析之jQuery.fn.each与jQuery.each用法
    下一篇:jQuery中DOM树操作之复制元素的方法

    相关推荐

    • 🚩Vue源码——组件如何渲染成最终的DOM

      最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

      6 天前
    • (深入)使用jQuery复制数组(复制)

      Communitymorgancodes提出了一个问题:(Deep) copying an array using jQuery [duplicate],或许与您遇到的问题类似。

      3 年前
    • 鼠标移入移出效果 -- jQuery/Vue版

      元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、根据...

      2 年前
    • 高效的jQuery代码编写技巧总结

      最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升。本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码。

      4 年前
    • 高性能JavaScript之DOM篇

      本篇文章主要分享一下操作DOM时的一些细节,来提高页面性能。 首先我们来思考以下几个问题。 1.如何获取页面中所有class为div1和div2的div元素。 2.你了解HTMLCollection和...

      1 年前
    • 高性能JavaScript DOM编程(1)

      我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用...

      3 年前
    • 面试官问:如何利用 random 计算 π

      前言 这是基友面试 RingCenter 时被问到的一个题目 表面上考察的是概率论等基础知识,实际可能还会问到事件循环等底层知识,以及 React Fiber 蒙特卡洛法求 π 说蒙特卡洛可能不太理...

      5 个月前
    • 非ajax jQuery POST请求

      amit提出了一个问题:non-AJAX jquery POST request,或许与您遇到的问题类似。 回答者Doug Neiner给出了该问题的处理方式: I know what you are...

      3 年前
    • 除了jQuery中单击的元素之外,如何选择所有类?

      Hassan Al-Jeshi提出了一个问题:how to select all class except the clicked element in JQuery?,或许与您遇到的问题类似。

      3 年前
    • 限制上传文件大小和格式的jQuery插件实例

      本文实例讲述了限制上传文件大小和格式的jQuery插件。分享给大家供大家参考。具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且...

      5 年前

    官方社区

    扫码加入 JavaScript 社区