这段代码展示了如何为div#content中的内容生成目录，也无非是对h系列标记进行解析。当然，也早有一些人实现了。
​1. [代码][HTML]代码     
<html>
    <head>
        <title> 测试  </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="../lib/js/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function() {
                //index01
                $("#index01").text($("#content").html());
                //index02
                x = $("h1,h2").toArray();
                c = "";
                for (i = 0; i < x.length; i++)
                {
                    c = c + x[i].innerHTML + "<br />";
                }
                $("#index02").html(x + "<br/>" + c);
                //index03
                x = $("h1,h2");
                c = "";
                x.each(function() {
                    c = c + $(this).text() + "  " + $(this).prop('tagName') + "<br/>"; //prop()与attr()的区别
                });http://www.huiyi8.com/hunsha/lifu/​
                $("#index03").html(c);
                //index04
                //generate anchor
                x = $("h1,h2");
                n = 0;
                c = "";
                x.each(function() {
                    $(this).before("<a name='anchor" + n + "'></a>");
                    if ($(this).prop('tagName') == "H1") //不可用"h1"
                    {婚纱礼服欣赏        
                        c=c+"<a href='#anchor"+n+"' class='anchor-h1'>"+$(this).text()+"</a><br/>";
                    }
                    else {
                        c=c+"<a href='#anchor"+n+"' class='anchor-h2'>"+$(this).text()+"</a><br/>";
                    }
                    n = n + 1;
                });
                $("#index04").html(c);
            });
        </script>
        <div id="index01"></div><hr/>
        <div id="index02"></div><hr/>
        <div id="index03"></div><hr/>
        <div id="index04"></div><hr/>
        <div id="content">
            <h1>第一章</h1>
            <h2>第1节</h2>
            <p>你好</p>
            <h2>第2节</h2>
            <h1>第二章</h1>
            <h2>第1节</h2>
            <h2>第2节</h2>
        </div>
    </body>
</html>
​

2. [图片] 01.jpg

使用jQuery为博客生成目录的更多相关文章

  1. 团队Alpha博客链接目录

    Dipper团队Alpha博客链接目录 团队Alpha冲刺博客 第一次冲刺 第二次冲刺 第三次冲刺 第四次冲刺 第五次冲刺 第六次冲刺 第七次冲刺 第八次冲刺 第九次冲刺 第十次冲刺 第十一次冲刺 第 ...

  2. CSDN博客测试目录

    经常写博客,但是一般没怎么注意些目录,最近看别人写的博客都有目录,所以我也想在以后写好目录,这样子也方便阅读. 这里就写一个实验: 这里一级目录 这里是一级目录下的文本.林肯公园 这里是1.1目录 这 ...

  3. Elasticsearch-6.7.0系列-Joyce博客总目录

     官方英文文档地址:https://www.elastic.co/guide/index.html Elasticsearch博客目录 Elasticsearch-6.7.0系列(一)9200端口 . ...

  4. 老猿Python博客文章目录索引

    本目录提供老猿Python所有相关博文的一级目录汇总,带星号的为收费专栏: 一.专栏列表 本部分为老猿所有专栏的列表,每个专栏都有该专栏置顶的博文目录: 专栏:Python基础教程目录 专栏:* 使用 ...

  5. ORACLE 博客文章目录(2015-05-27更新)

    从接触ORACLE到深入学习,已有好几年了,虽然写的博客不多,质量也参差不齐,但是,它却是成长的历程的点点滴滴的一个见证,见证了我在这条路上的寻寻觅觅,朝圣的心路历程,现在将ORACLE方面的博客整理 ...

  6. SQL Sever 博客文章目录(2016-07-06更新)

    SQL Server方面的博客文章也陆陆续续的写了不少了,顺便也将这些知识点整理.归纳一下下.方便自己和他人查看. MS SQL 数据类型 三大数据库对比研究系列--数据类型 MS SQL 表和视图 ...

  7. 深入理解Java虚拟机博客参考目录

    参考博客:注明请注明出处 深入理解Java虚拟机读书笔记之:第5章 Java虚拟机(Java虚拟机内部结构图,很重要) 深入理解Java虚拟机读书笔记之:第6章 Java class文件: <深 ...

  8. ORACLE 博客文章目录(2015

    从接触ORACLE到深入学习,已有好几年了,虽然写的博客不多,质量也参差不齐,但是,它却是成长的历程的点点滴滴的一个见证,见证了我在这条路上的寻寻觅觅,朝圣的心路历程,现在将ORACLE方面的博客整理 ...

  9. ORACLE 博客文章目录

    从接触ORACLE到深入学习,已有好几年了,虽然写的博客不多,质量也参差不齐,但是,它却是成长的历程的点点滴滴的一个见证,见证了我在这条路上的寻寻觅觅,朝圣的心路历程,现在将ORACLE方面的博客整理 ...

随机推荐

  1. pycharm下： conda installation is not found ----一个公开的bug的解决方案

    pycharm  conda installation is not  found ----一个公开的bug的解决方案 pycharm+anaconda 是当前的主流的搭建方案,但是常出现上述问题. ...

  2. MapReduce Input Split 输入分/切片

    MapReduce Input Split(输入分/切片)详解 public static long getMaxSplitSize(JobContext context) { return cont ...

  3. KSTORE日常工作遇到问题总结

    1.csv导入kstore命令语句 oimpexp -F "E:/127.csv" -S KSTORE -T "T_BUSDATA"  -d 1 -z -B 7 ...

  4. Harbor的搭建（vmware企业级docker镜像私服）

    1.下载harbor,地址https://github.com/vmware/harbor2.进入harbor-master/Deploy目录,修改harbor.cfg文件,主要修改以下信息      ...

  5. Stockbroker Grapevine - poj 1125 （Floyd算法）

      Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 30454   Accepted: 16659 Description S ...

  6. win10下VS2010中文输入法切换为英文卡死

    中文输入法下输入英文,VS2010会出现卡顿现象,之后会出现一大串的重复英文字母. win10下VS2010安装的助手VAssit系统不兼容,而win7下不会出现上述问题. 解决办法:卸载安装的助手V ...

  7. 【CodeM初赛A轮】D 分解质因数+暴力

    题目描述树链是指树里的一条路径.美团外卖的形象代言人袋鼠先生最近在研究一个特殊的最长树链问题.现在树中的每个点都有一个正整数值,他想在树中找出最长的树链,使得这条树链上所有对应点的值的最大公约数大于1 ...

  8. 宇视摄像机/NVR OCX插件插件安装出现：Failed to register ocx, error code 14001 错误的解决方法

    最近在使用EasyNVR接入海康.宇视的摄像机进行景观直播的项目时,需要进入宇视设备进行音视频编码参数的调整,要说呢,海康的产品好就是要好很多: 海康的设备后台管理页面,不需要装插件也能进去,而且能调 ...

  9. 大数据学习系列（1）-- linux之文件系统结构介绍

    1./ 根目录 --------- 所有目录挂在其下 2./boot --------- 存放Ubuntu内核和系统启动文件.系统启动时这些文件先被装载. 3./etc --------- 系统的配置 ...

  10. 《Java线程池》：任务拒绝策略

    在没有分析线程池原理之前先来分析下为什么有任务拒绝的情况发生. 这里先假设一个前提:线程池有一个任务队列,用于缓存所有待处理的任务,正在处理的任务将从任务队列中移除.因此在任务队列长度有限的情况下就会 ...