0

I have a number of CMS generated items that I could like to count and display the item's number in a div

I'm using this so far:

$('.course-number').each((i, e) => $(e).text(i+1));

This correctly outputs 1, 2, 3, 4 etc into the div.course-number as expected.

But for aesthetic reasons I would like numbers below 10 to have a preceding zero – so the output was 01, 02, 03, 04 etc then 10, 11, 12 etc without a preceding zero.

Can anybody help me achieve this?

(update: the proposed duplicate does not provide a complete answer that addresses each need: (1) count each element (2) output the number as text inside the element (3) add a preceding zero IF less than 10)

matt_50
  • 7,245
  • 4
  • 17
  • 13

2 Answers2

1

If i+1 is less than 10, just add the zero...

Within the .text() parenthesis, a ternary operator is used. The structure is:

(condition) ? true : false

Where you specify a condition... And a value for true and for false.
;)

$('.course-number').each((i, e) => $(e).text( ((i+1)<10) ? "0"+(i+1) : i+1  ));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="course-number"></div>
<div class="course-number"></div>
<div class="course-number"></div>
<div class="course-number"></div>
<div class="course-number"></div>
<div class="course-number"></div>
<div class="course-number"></div>
<div class="course-number"></div>
<div class="course-number"></div>
<div class="course-number"></div>
<div class="course-number"></div>
<div class="course-number"></div>
Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
1

const fill = function(courseNumber) { return ('0' + courseNumber).substr(Math.max(courseNumber.toString().length, 2)*(-1)) }

console.log(fill(0))

console.log(fill(2))

console.log(fill(10))

console.log(fill(623))

console.log(fill(199999))

is another simple solution.

connexo
  • 53,704
  • 14
  • 91
  • 128