Estoy usando un proveedor de sitio externo como un pequeño sitio de demostración (para una prueba de concepto), así que no lo he construido yo mismo.
Pero quería poder hacer esto en JS puro y sin bibliotecas externas (una para poder aprender de otros y eliminar dos importaciones).
Tengo un <aside id="sidebar"> y un <ul> en una barra lateral que genera los encabezados (H1-H6) del cuerpo, similar a esto:
<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>Me preguntaba cómo sería capaz de prefijar el
<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>Pero también puede establecer un alcance para que la numeración pueda comenzar en H2 y terminar en H4 (en lugar de una regla general H1-H6):
<!-- 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>No soy tan bueno con Javascript y esperaba que hubiera alguna ayuda o sugerencias :)