Question

I would like to dynamically generate a string of text based on a current day. So, for example, if it is day 1 then I would like my code to generate = “Its the <dynamic>1*<dynamic string>st</dynamic string>*</dynamic>”.

There are 12 days in total so I have done the following:

1. I’ve set up a for loop which loops through the 12 days.

2. In my html I have given my element a unique id with which to target it, see below:

   <h1 id="dynamicTitle" class="CustomFont leftHeading shadow">On The <span></span> <em>of rest of generic text</em></h1>
   

3. Then, inside my for loop I have the following code:

   $("#dynamicTitle span").html(i);
   var day = i;
   if (day == 1) {
       day = i + "st";
   } else if (day == 2) {
       day = i + "nd"
   } else if (day == 3) {
       day = i + "rd"
   }
   

UPDATE

This is the entire for loop as requested:

$(document).ready(function () {
    for (i = 1; i <= 12; i++) {
        var classy = "";
        if (daysTilDate(i + 19) > 0) {
            classy = "future";
            $("#Day" + i).addClass(classy);
            $("#mainHeading").html("");
            $("#title").html("");
            $("#description").html("");
        } else if (daysTilDate(i + 19) < 0) {
            classy = "past";
            $("#Day" + i).addClass(classy);
            $("#title").html("");
            $("#description").html("");
            $("#mainHeading").html("");
            $(".cta").css('display', 'none');
            $("#Day" + i + " .prizeLink").attr("href", "" + i + ".html");
        } else {
            classy = "current";
            $("#Day" + i).addClass(classy);
            $("#title").html(headings[i - 1]);
            $("#description").html(descriptions[i - 1]);
            $(".cta").css('display', 'block');
            $("#dynamicImage").attr("src", ".." + i + ".jpg");
            $("#mainHeading").html("");
            $(".claimPrize").attr("href", "" + i + ".html");
            $("#dynamicTitle span").html(i);
            var day = i;
            if (day == 1) {
                day = i + "st";
            } else if (day == 2) {
                day = i + "nd"
            } else if (day == 3) {
                day = i + "rd"
            } else if (day) {
            }
        }
    }

Answer 1

For English ordinal suffix, the rules are as follows:

• st is used with numbers ending in 1 (e.g. 1st, pronounced first)
• nd is used with numbers ending in 2 (e.g. 92nd, pronounced ninety-second)
• rd is used with numbers ending in 3 (e.g. 33rd, pronounced thirty-third)
• As an exception to the above rules, numbers ending with 11, 12, and 13 use -th (e.g. 11th, pronounced eleventh, 112th, pronounced one
  hundred [and] twelfth)
• th is used for all other numbers (e.g. 9th, pronounced ninth)

The following JavaScript code accomplishes this:

function ordinal_suffix_of(i) {
    let j = i % 10,
        k = i % 100;
    if (j === 1 && k !== 11) {
        return i + "st";
    }
    if (j === 2 && k !== 12) {
        return i + "nd";
    }
    if (j === 3 && k !== 13) {
        return i + "rd";
    }
    return i + "th";
}

// output for numbers between 0-115

for (let n = 0; n <= 115; n++) {
    console.log(n + " " + ordinal_suffix_of(n));
}