解析 Html 自动生成目录 TOC 的相关代码

相关代码function create_content_TOC(dom, config, target) {

let hList = dom.find('h1,h2,h3,h4,h5,h6');

console.log(hList);

target.html('');

if (!hList[0]) {

target.html('');

target.hide();

return;

}

target.show();

let haStyle = {

opacity: 0.65,

position: 'absolute',

marginLeft: '-1em',

paddingRight: '0.5em'

};

hList.each(function(i, item) {

let hTag = $(item),

title = hTag.text();

let tag = hTag.get(0).localName;

let id = `md-title-item${i}`;

let mgLeft = (tag[1] - 2) * 15;

let ha = $(`

let a = $(``);

ha.attr('href', '#' + id).css(haStyle);

hTag.attr('id', id)

.addClass('content-htag')

.prepend(ha);

a.attr('title', title)

.addClass('toc-' + tag)

.css({ marginLeft: mgLeft, display: 'block' });

console.log(a);

target.append(a);

});

}

结果![图片描述...](https://cdn.surest.cn/Fhz0wFFlvINnM661E9-MKZYobxzC)

相关项目

本文由 邓尘锋 创作,采用 知识共享署名4.0 国际许可协议进行许可

本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名

最后编辑时间为: May 8, 2021 at 11:09 am

html提交列表编号自动生成目录,解析 Html 自动生成目录 TOC 的相关代码相关推荐

  1. mysql和redis统计网站活跃度,最代码网站用户私信列表采用mysql union查询优化为Redis查询的经验和相关代码片段分享...

    由于用户和私信的数据量逐渐增加,查询用户和其他用户的私信合并排重排序的sql语法给mysql带来了很大的压力,springdata jpa的hql查询语法如下:select id from (sele ...

  2. Android Zxing3.3.2扫描、生成、解析二维码,以及近距离无法识别的问题

    Zxing目前最新版本3.3.2,打开摄像头就成功了,真正的极速扫描,效果喜人. 一.集成流程 1.克隆代码就不说了. 2.zxing项目巨大,我们只需要扫描部分的代码. 将android.andro ...

  3. 条形码?二维码?生成、解析都在这里!

    二维码生成与解析 一.生成二维码 二.解析二维码 三.生成一维码 四.全部的代码 五.pom依赖 直接上代码: 一.生成二维码 public class demo {private static fi ...

  4. Zxing和QR CODE 生成与解析二维码实例(普通篇)

    首先下载对应的jar包,本实例用的是Zxing2.2jar 下载地址:http://download.csdn.net/detail/gao36951/8161861 Zxing是Google提供的关 ...

  5. 计算机基础课目录,计算机基础课程Word目录自动生成机制

    徐雪峰 摘  要: Word的目录自动生成功能,简单易用,但长文编辑.多人协作时极容易出错,这也是很多高校"计算机基础"课程Word部分教学的一个重点和难点.从目录自动生成的功能看 ...

  6. 计算机word如何插入新列表,电脑word文档中怎么给表格自动添加序号?怎么增加表目录...

    电脑word文档中怎么给表格自动添加序号?怎么增加表目录 腾讯视频/爱奇艺/优酷/外卖 充值4折起 我们看一篇word文件的时候,如果篇幅比较长而表格又比较多的话,一般会给这篇word设置一个表目录. ...

  7. id自动编号 php,php根据数据id自动生成编号的实现方法

    php根据数据id自动生成编号的实现方法 如下所示: /*编号=年份后两位+月份+id四位数*/ $id = $this->student_model->save(0, $data); $ ...

  8. cad图纸目录自动生成插件_如何自动生成论文目录?

    一篇论文的内容很多,因此需要各种分级标题,如果论文没有目录的话,文章就看不懂了.导师在看你的论文时,看目录就可以大致了解论文的内容,如果对某论点感兴趣,可以根据目录找到对应的位置.因此目录是非常重要的 ...

  9. 工银e生活开发脱坑日志(9)JAVA版的SDK自动生成msgId,PHP如何生成消息通讯唯一编号msgId

    工行开发中msgId,是消息通讯唯一编号. JAVA中,SDK自动生成msgId,具体规则如下(来源工行支持中心): SDK支持自动生成msgId.以数据类型API为例,只需在SDK中调用时将clie ...

最新文章

  1. HTTP 协议入门 — (TCP/IP协议族、通信传输流、URI 与 URL 的区别、Cookie 状态管理、HTTP 支持的方法、状态码类别、HTTP 首部字段)
  2. 【7】nagios从零学习使用 - nrpe插件使用
  3. MATLAB加入螺旋相位板调制,连续型螺旋相位板设计方法与流程
  4. 构造数列中的常见变形总结【中阶和高阶辅导】
  5. 浅析 Linux 初始化系统(系统服务管理和控制程序/Init System) -- sysvinit/systemvinit(System V init)
  6. 按应用领域来划分,电话光端机主要分为哪几类
  7. js将base64做UrlEncode转码
  8. MySQL 日志文件 说明
  9. java写手机游戏_如何将自己编写的JAVA小游戏写到手机里?
  10. 学习minix 3(未完成)
  11. 2018.3.13校内互测总结-bitset-凸包-扫描线
  12. 数字图像处理复习记录(二)邻接、连通和形态学处理
  13. imdisk虚拟光驱安装linux,u深度ImDisk虚拟光驱加载iso镜像文件图文详细教程
  14. 快速排序(过程图解)
  15. cad版本怎么在线转换?软件操作更高效
  16. android设置头像同时设置模糊背景
  17. Ubuntu系统无法使用vim命令
  18. 如何理解BRD、MRD、PRD这些名词
  19. 图的邻接矩阵存储及遍历
  20. 使用Eclipse开发Spring的第一个简单程序

热门文章

  1. HDwiki 6.0 图片大图不能正常显示的解决方法
  2. spring核心包功能解析
  3. 地铁建设 (Standard IO)
  4. 0320 关于构建之法前三章的读后感
  5. ASP.NET典型三层架构企业级医药行业ERP系统实战(8大模块22个子系统)
  6. 回调机制在 Android 监听用户界面操作中的体现
  7. HTML5概述、标签
  8. Webpack实战(六):如何优雅地运用样式CSS预处理
  9. java字段注解类型数组_Java注解用法
  10. Python----虚拟环境