第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用 jQuery 函數(shù)以編程方式編號 <h1-h6>

使用 jQuery 函數(shù)以編程方式編號 <h1-h6>

狐的傳說 2023-01-06 15:42:59
我正在嘗試創(chuàng)建一個為標(biāo)題 (h1-h6) 創(chuàng)建自動編號的 javascript 函數(shù)（我可以在多個項(xiàng)目中重復(fù)使用）。我目前可以使用以下內(nèi)容通過 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;}它創(chuàng)建了這種格式：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但我想將其轉(zhuǎn)換為 JS 函數(shù)（并刪除 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);
查看完整描述

2 回答

?
烙印99

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超13個贊

這并不完美，需要進(jìn)一步開發(fā)以解釋具有不同標(biāo)題變化的部分，但應(yīng)該為您提供一個良好的起點(diǎn)


使用nextUntil()它包裝h1一個部分中的組，然后循環(huán)遍歷這些部分以使用它們的索引作為主要編號，然后循環(huán)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>


查看完整回答
反對 回復(fù) 2023-01-06
?
嚕嚕噠

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個贊

我剛剛.ol()為jQuery. 它創(chuàng)建一個有序列表并返回new具有方法的構(gòu)造函數(shù)的實(shí)例.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>


查看完整回答
反對 回復(fù) 2023-01-06
  • 2 回答
  • 0 關(guān)注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號