jQuery 通过 H* 标签生成目录结构

时间:2020-02-29 标签: JavaScript

疫情期间在家完成了一套手册文档项目,在文档详情页需根据 H1、H2、… H6 标签生成目录结构的锚点定位。

本文示例的目录结构的样式是根据 css 中 .li1、.li2 … .li6 的 padding-left 来设置各个节点位置的。

JS 示例代码:

var treeArray = [];
var reg = /^[1-6]$/;

// 获取文本中所有 H 标签,并整理等级 level 标识
$('.content').children().each(function(index, element) {
    var tagName = $(this).get(0).tagName;
    if (tagName.substr(0, 1) == "H" && reg.test(tagName.substr(1, 1))) {
        treeArray.push({
            id: $(this).attr('id'),
            name: $(this).text(),
            level: tagName.substr(1, 1)
        });
    }
})
if (!treeArray.length) return false;

// 创建 array 数组,定位 H* 标签在当前组的位置 .li1 .li2 ... .li6
var array = [];
treeArray.map(function(item) {
    array.push(item['level']);
});

// 排序 array 数组
// 当 H1 下面无 H2,有 H3 标签的话,H3在当前组的二号位
array.sort(function(a, b) {return a - b});
$.unique(array);

// 获取文本中最大的 H 标签数组(H1 大于 H2)
var min_lavel = Math.min.apply(null, array);

// 生成目录结构 html 代码
var str = '<ul>';
for (var i = 0; i < treeArray.length; i++) {
    var ident = ($.inArray(treeArray[i].level, array)) + 1;
    str += '<li class="li'+ident+'" onclick="scrollToNode(\'#'+treeArray[i].id+'\');">'+treeArray[i].name+'</li>';
}
str += '</ul>';
$('.node').html(str);

目录结构的 html/css 代码示例:

// HTML
<div class="node">
    <ul>
        <li class="li1" onclick="scrollToNode('#文件操作');">文件操作</li>
        <li class="li2" onclick="scrollToNode('#删除文件');">删除文件</li>
        <li class="li2" onclick="scrollToNode('#复制文件');">复制文件</li>
        <li class="li2" onclick="scrollToNode('#压缩文件');">压缩文件</li>
        <li class="li1" onclick="scrollToNode('#vi--vim');">vi / vim</li>
    </ul>
</div>

// CSS
.node ul li.li1 {
    padding-left: 1rem;
}
.node ul li.li2 {
    padding-left: 2rem;
}
...
.node ul li.li6 {
    padding-left: 6rem;
}
// 根据个人需求,不建议设置到 .li6,一般到 .li3 .li4 即可

本文文档项目地址:http://lh1010.com/doc.html

© 2020 Lh1010 - 豫ICP备16115435号-1