Question

0

94

Views

Adding custom numbers to sidebar in only Javascript

I'm using an external site provider as a small demo site (for a proof of concept) so I havent build it myself.

But I wanted to be able to do this in pure JS and no external libraries (one so I can learn from others and two imports get stripped).

I have an <aside id="sidebar"> and an <ul> in a sidebar that generates the headings (H1-H6) from the body, similar to this:

<ul>
  <li><a>Black Books</a></li>            <-- H1
  <ul>
    <li><a>Season 2</a></li>             <-- H2
    <ul>
      <li><a>Episode 1</a></li>          <-- H3
      <ul>
        <li><a>Characters</a></li>       <-- H4
        <li><a>Quotes</a></li>           <-- H4
      </ul>
    </ul>
  </ul>
</ul>

I was wondering how would I be able to prefix the

tags with the level that they are in from the heading tag? So the output would be this:

<ul>
  <li><a>1. Black Books</a></li>
  <ul>
    <li><a>1.1. Season 2</a></li>
    <ul>
      <li><a>1.1.1. Episode 1</a></li>
      <ul>
        <li><a>1.1.1.1. Characters</a></li>
        <li><a>1.1.1.2. Quotes</a></li>
      </ul>
    </ul>
  </ul>
</ul>

But also be able to set a scope so the numbering can start at H2 and end at H4 (instead of a blanket H1-H6 rule):

<!-- starting in a scope (only H2-H3) -->
<ul>
  <li><a>Black Books</a></li>
  <ul>
    <li><a>1.1. Season 2</a></li>
    <ul>
      <li><a>1.1.1. Episode 1</a></li>
      <ul>
        <li><a>Characters</a></li>
        <li><a>Quotes</a></li>
      </ul>
    </ul>
  </ul>
</ul>

Im not that good with Javascript and was hoping there was some help or pointers :)

about 4 years ago · Juan Pablo Isaza

Answer question

0

94

Adding custom numbers to sidebar in only Javascript

Find remote jobs

Andres GPT