具有jQuery函数的程序数字<h1-h6>

Question

我正在尝试创建一个javascript函数(可以在多个项目上重用)，该函数为标题(h1-h6)创建自动编号。

目前，我可以通过css使用以下方法完成这一任务：

body { counter-reset: h1; }
h1 { counter-reset: h2; }
h2 { counter-reset: h3; }
h3 { counter-reset: h4; }
h4 { counter-reset: h5; }
h5 { counter-reset: h6; }

h1:before {
    content: counter(h1,decimal) ". ";
    counter-increment: h1;
}
h2:before {
    content: counter(h1, decimal) "." 
             counter(h2, decimal) ". ";
    counter-increment:h2;
}
h3:before {
    content: counter(h1, decimal) "." 
             counter(h2, decimal) "."
             counter(h3, decimal) ". "
    counter-increment:h3;
}
h4:before {
    content: counter(h1, decimal) "." 
             counter(h2, decimal) "."
             counter(h3, decimal) "."
             counter(h4, decimal) ". ";
    counter-increment:h4;
}
h5:before {
    content: counter(h1, decimal) "." 
             counter(h2, decimal) "."
             counter(h3, decimal) "."
             counter(h4, decimal) "."
             counter(h5, decimal) ". ";
    counter-increment:h5;
}
h6:before {
    content: counter(h1, decimal) "." 
             counter(h2, decimal) "."
             counter(h3, decimal) "."
             counter(h4, decimal) "."
             counter(h5, decimal) "." 
             counter(h6, decimal) ". ";
    counter-increment:h6;
}

它创建了这样的格式：

1. Heading number 1
1.1. Heading level 2
1.1.1. Heading level 3

2. Heading number 2
3. Heading number 3
2.1. Heading level 2
2.2. Heading level 2
2.2.1. Heading level 3

但我希望将其转换为JS函数(并删除CSS药剂)，这样我就可以在某些页面上获得以下功能：

if( typeof mbopts !== 'undefined' && mbopts.length > 0 ) {
    var mbopts = {
        levels:    Int,     // [1-6 being H1-H6]
        separator: String,  // decimal, hyphen, brace -> .,)
        startAt:   Int,     // default: 1, but what the begin numbering at
    };
}
$('#main').mbheaders(mbopts);

然后在函数中，它将：

(function(h) {
    h.fn.mbheaders = function( mbopts ) {
        // create the defaults
        let mbdefaults = {
            levels: 6,
            separator: "decimal",
            startAt: 1
        };

        // extend the defaults
        let mboptions = h.extend( {}, mbdefaults, mbopts );


        return this.each( function() {

            // the variable for this
            var $this = h(this);
            
            // do the magic
            // 
            // get $levels and use that as the limiter
                // 1. find all the H1 in the scope
                // 1.1. add the start number to it
                // 
                // 2. find all the H2 under H1 until next H1
                // 2.1. add the (H1 + index++) to it
                // 
                // ...
                // 
                // 6. find all the H6 under H5 until next H6
                // 6.1. add the (H1 + H2 + H3 + H4 + H5 + index++) to it
        }
    }
}( jQuery ));

我想这样做的原因是，当我编写文档时，我有一个完整的页面文档(full.md)，但是我也将这些部分分割成自己的文件(01-section.md、02-section.md等)。问题是当文件在02-section.md上开始时，标题在1.处重编号，而不是变量。

示例.md文件在作为html处理时

<article class="markdown-section" id="main">
    <h1 id="about-this-document">About this document</h1>
    <p>This is the online documentation of the <strong>Company Procedures</strong>.</p>

    <h1 id="everyone">Everyone</h1>

        <h2 id="logging-into-your-computer">Logging into your computer</h2>
            <p>These are the instructions on how to log into your computer.</p>

        <ol>
            <li>Step one</li>
            <li>Step two</li>
        </ol>

        <h2 id="programmes-on-taskbar">Programmes on taskbar</h2>

            <h3 id="microsoft-word">Microsoft Word</h3>
                <p>This is a word processor</p>

            <h3 id="mail">Mail</h3>
                <p>This is for your emails</p>

            <h3 id="document-management">Document management</h3>
                <h4 id="windows-explorer">Windows Explorer</h4>
                <h4 id="xyplorer">XYPlorer</h4>

    <h1 id="special-areas">Special areas</h1>

        <h3 id="on-the-road">On the road</h3>
        <h3 id="remote">Remote</h3>

</article>

对这个问题很重要的输出：

1. Everyone
1.1. Logging into your computer
1.2. Programmes on taskbar
1.2.1. Microsoft Word
1.2.2. Mail
1.2.3. Document management
1.2.3.1. Windows Explorer
1.2.3.2. XYPlorer

2. Special areas
2.1.1. On the road
2.1.2. Remote

Answer 1

这是不完美的，将需要进一步发展，以考虑到有不同的标题变化，但应该给你一个好的起点。

使用nextUntil()将h1组封装在一个节中，然后在这些节上循环使用它们的索引作为主数字，然后在h2上循环以获得次要数字等等。

​

// wrap all h1 in a section
$('h1').each(function() {
  $(this).nextUntil('h1').add(this).wrapAll('<section>');
});
// loop over sections after first one
$('section:gt(0)').each(function(i) {
  const num = i + 1, $sect = $(this);
  $sect.find('h1').prepend(`${num} `);
  $sect.find('h2').each(function(i) {
    const subnum = i + 1;
    $(this).text(function(_, txt) {
      return `${num}.${subnum} ${txt}`
    });

    $(this).nextUntil('h2', 'h3').text(function(i, txt) {
      return `${num}.${subnum}.${i+1} ${txt}`
    });
  });
});

section { border: 2px solid #ccc}
h1 {color: red}
h2 {color: blue}
h3 {color: green}
h1,h2,h3,h4,p{margin:0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="markdown-section" id="main">
  <h1 id="about-this-document">About this document</h1>
  <p>This is the online documentation of the <strong>Company Procedures</strong>.</p>

  <h1 id="everyone">Everyone</h1>

  <h2 id="logging-into-your-computer">Logging into your computer</h2>
  <p>These are the instructions on how to log into your computer.</p>

  <ol>
    <li>Step one</li>
    <li>Step two</li>
  </ol>

  <h2 id="programmes-on-taskbar">Programmes on taskbar</h2>

  <h3 id="microsoft-word">Microsoft Word</h3>
  <p>This is a word processor</p>

  <h3 id="mail">Mail</h3>
  <p>This is for your emails</p>

  <h3 id="document-management">Document management</h3>
  <h4 id="windows-explorer">Windows Explorer</h4>
  <h4 id="xyplorer">XYPlorer</h4>

  <h1 id="special-areas">Special areas</h1>

  <h3 id="on-the-road">On the road</h3>
  <h3 id="remote">Remote</h3>

</article>

​

Answer 2

我刚刚为.ol()创建了一个jQuery方法。它创建一个有序列表，并返回具有.li()方法的构造函数的一个.li()实例。.li()方法返回对有序列表的引用。把名单列出来！

​

function Ol(j){
  const ol = $('<ol></ol>');
  j.append(ol);
  this.li = (title, noIncrement = false)=>{
    let n = noIncrement ? '' : ' '+(ol.children().length+1);
    let li = $('<li>'+title+n+'</li>');
    ol.append(li);
    return li;
  }
}
$(function(){
$.fn.extend({
  ol:function(){
    return new Ol(this);
  }
});
const test = $('#test'), titles = test.ol(), title1 = titles.li('Title'), sections = title1.ol();
for(let i=0,l=10; i<l; i++){
  for(let n=0,chapters=sections.li('Chapter').ol(),q=4; n<q; n++){
    for(let z=0,subs=chapters.li('Section').ol(),c=3; z<c; z++){
      subs.li('sub-section').ol().li('content would go here', true);
    }
  }
}
const title2 = titles.li('Title').ol(), chapter1 = title2.li('Chapter').ol();
const chapter2 = title2.li('Chapter').ol(), chap1Sec1 = chapter1.li('Section').ol();
const chap2Sec1 = chapter2.li('Section').ol();
chap2Sec1.li('sub-section'); chap2Sec1.li('sub-section');
chap1Sec1.li('sub-section').ol().li('This is how you might use outside a loop', true);
});

*{
  margin:0; padding:0;
}
ol{
  list-style:none;
}
ol li{
  margin-left:10px;
}
#test>ol>li{
  margin-left:0;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div id='test'></div>

​