Looking for a way to increment a particular <p> style class (p.wp as an example) from 1 - n across multiple HTML pages.
The challenge is that the number needs to have 4 digits, ranging from 0001 to 0117.
#start_wp {counter-reset: WP 0;}
p.wp{}
p.wp:before{
counter-increment: WP 1;
content: "WP 000" counter(WP, decimal) ':';}
<body id="start_wp">
<p class="wp">This is a work package</p>
<p class="wp">This is a work package</p>
</body>
Setting a number from 0001-0009 is simple using auto-number with before:. However, creating additional classes for 00nn and 0nnn seems cumbersome. Is there a way to automate this through JavaScript or jQuery?
Main challenges:
- Where should I place
counter-resetfor continuous numbering across all pages? - Can it be set using an ID?
- Should the jQuery or JS code be added to each affected page?
While CSS is clear, the world of JS and jQuery is daunting. Seeking guidance.
Update:
After scouring other code snippets, this was crafted:
function LeadingZeros (){
var num = 4;
if num = (num < 10)
result = ("000" + num);
if num = (num < 100)
result = ("00" + num);
if num = (num < 1000)
result = ("0" + num);
}
Uncertain about:
- If this approach is correct
- Next steps after reaching this point
Any advice?