使用 jQuery 函数以编程方式编号 <h1-h6>

Question

我正在尝试创建一个为标题 (h1-h6) 创建自动编号的 javascript 函数（我可以在多个项目中重复使用）。我目前可以使用以下内容通过 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 11.1. Heading level 21.1.1. Heading level 32. Heading number 23. Heading number 32.1. Heading level 22.2. Heading level 22.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);

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. 它创建一个有序列表并返回new具有方法的构造函数的实例.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>