根据H标签自动生成多级目录

这个问题分为两步

将标签的层级关系生成树结构
递归遍历树结构，使用ol li嵌套生成多级目录

<h2>一级标题1</h2>                            1. 一级标题1
<h3>二级标题1</h3>                                1. 二级标题1
<h2>一级标题2</h2>                            2. 一级标题2
<h3>二级标题2</h3>              =>                1. 二级标题2
<h3>二级标题3</h3>                                2. 二级标题3
<h4>三级标题1</h4>                                    1. 三级标题1
<h2>一级标题3</h2>                            3. 一级标题3

生成树结构

传入节点，将节点内的h标签生成树结构并返回

function tree(wrapNode) {const childs = Array.prototype.slice.call(wrapNode.children)const titles = childs.filter(item => item.localName.indexOf('h') === 0)const root = { name: '在座各位都是我儿子, hahaha', children: [] }// 第一位选手let current = {node: titles[0],children: [],parent: root,}root.children.push(current)titles.reduce((a, b) => {// 孑然一身let obj = { node: b, children: [] }// 下面开始认爹环节if (a.localName[1] < b.localName[1]) {obj.parent = current} else if (a.localName[1] === b.localName[1]) {obj.parent = current.parent} else if (a.localName[1] - b.localName[1] === 1) {obj.parent = current.parent.parent} else if (a.localName[1] - b.localName[1] === 2) {obj.parent = current.parent.parent.parent} else if (a.localName[1] - b.localName[1] === 3) {obj.parent = current.parent.parent.parent.parent}// 你是你爹的儿子？ 好像没什么不对obj.parent.children.push(obj)// 掌声有请下一位选手current = objreturn b})return root.children
}

遍历树结构

function catalog(current, target) {const box = document.querySelector(target)const titleTree = tree(document.querySelector(current))creatEle(titleTree, box)function creatEle(arr, parent) {if (!arr.length) returnconst ol = document.createElement('ol')arr.forEach(item => {const li = document.createElement('li')li.innerHTML = `<a href="">${item.node.innerHTML}</a>`creatEle(item.children, li)ol.appendChild(li)})parent.appendChild(ol)}
}

调用

// 将body内的h标签生成目录放到#box中
catalog('body', '#box')

树结构的优化算法✨

最初的算法，if判断很多次。不停的.parent一点儿都不优雅
新的算法，使用while不断上溯父级，直到标签等级比将要插入的标签大一级。
结果相同，代码更短

function tree(wrapNode) {const childs = Array.prototype.slice.call(wrapNode.children)const titles = childs.filter(item => item.localName.indexOf('h') === 0)const root = { children: [] }let current = {node: titles[0],children: [],parent: root,}root.children.push(current)titles.reduce((a, b) => {let obj = { node: b, children: [] }while (current.node.localName[1] - obj.node.localName[1] !== -1) {current = current.parentif (current === root) break // 上溯到根节点就跳出}obj.parent = currentobj.parent.children.push(obj)current = objreturn b})return root.children
}

代码总是越写越少 ↓

function tree(wrapNode) {const root = { children: [] }let current = rootArray.from(wrapNode.children).filter(item => item.localName.indexOf('h') === 0).forEach(item => {const obj = { node: item, children: [], parent: undefined }while (current !== root && current.node.localName[1] - obj.node.localName[1] !== -1) {current = current.parent}obj.parent = currentobj.parent.children.push(obj)current = obj})return root.children
}

根据H标签自动生成多级目录相关推荐

html HTML1300 进行了导航,jquery根据文章H标签自动生成导航目录
jquery根据文章H标签自动生成导航目录2017-11-19 20:57 在一些旅游网站,比如说途牛.携程这些,当你看某条线路的详情页时,右边会有相应的第一天.第二天等的目录. 这么大的网站,不可能 ...
根据文章H标签自动生成导航目录
原文地址http://www.santii.com/article/154.html 在一些旅游网站,比如说途牛.携程这些,当你看某条线路的详情页时,右边会有相应的第一天.第二天等的目录. 这么大的网 ...
长篇文章根据文章H标签自动生成导航目录方法
在一些旅游网站,比如说途牛.携程这些,当你看某条线路的详情页时,右边会有相应的第一天.第二天等的目录. 这么大的网站,不可能后台添加行程的时候,每一天都要自动写一个目录吧! 所以应该是自动生成的. 那 ...
根据文章中H标签自动生成文章目录
以前看到csdn上的目录结构就想把它移植到博客里,今天抽了个空从csdn上拔下了代码. js代码,复制放入到single.php页面中 <script type="text/javas ...
java实现自动生成多级目录
要求: 传入三个参数,第一个表示要创建文件的根目录,第二个表示创建文件的层次,第三个参数代表每层创建目录的个数: 文件名字为随机生成的长度为10的字符串: 以下实现的方式为每次在创建目录时子目录和父目 ...
Jquery实现自动生成二级目录
在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着 ...
大论文自动生成标题目录、图目录和表目录
大论文自动生成标题目录.图目录和表目录到了写大论文的时间啦,结果卡在了目录生成这里,各种小问题,网上找了找,没有一个较为系统地说明,花费了一些时间,在这里系统地介绍一下. 标题目录自动生成 1.刚 ...
博客园文章自动生成导航目录
文章如果比较长的话,子标题很难找,文章结构没法一目了然,如果有一个导航目录靠在边栏就好了看了很多园子里其他的文章,js和css挺长的,怕用不好,干脆自己尝试写一个一.要实现的功能 1.自动生成不 ...
JavaScript自动生成博文目录导航/TOP按钮
博客园页面添加返回顶部TOP按钮进入网页管理->设置在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式此处可以将背景色background-co ...

根据H标签自动生成多级目录

根据H标签自动生成多级目录

生成树结构

遍历树结构

调用

树结构的优化算法✨

根据H标签自动生成多级目录相关推荐

最新文章

热门文章