[removed] Ordinal suffix for numbers with specific CSS class

Question

I am trying to display numbers within a particular table with ordinal suffixes. The table always shows three numbers which come from an XML file. The numbers show ranks, so for

Answer 1

My own suggestion, would be:

$(".ordinal").text(function (i, t) {
    i++;
    var str = i.toString().slice(-1),
        ord = '';
    switch (str) {
        case '1':
            ord = 'st';
            break;
        case '2':
            ord = 'nd';
            break;
        case '3':
            ord = 'rd';
            break;
        case '4':
        case '5':
        case '6':
        case '7':
        case '8':
        case '9':
        case '0':
            ord = 'th';
            break;
    }
    return i + ord;
});

JS Fiddle demo.

This effectively takes the incremented number (i++, in order to start from 1 not 0), converts it to a string, then looks at the last number of that string. This should work for any number, since the ordinal is based purely on that last number.

You could also extend the Number prototype to implement this functionality:

Number.prototype.ordinate = function(){
    var num = this + 1,
        last = num.toString().slice(-1),
        ord = '';
    switch (last) {
        case '1':
            ord = 'st';
            break;
        case '2':
            ord = 'nd';
            break;
        case '3':
            ord = 'rd';
            break;
        case '4':
        case '5':
        case '6':
        case '7':
        case '8':
        case '9':
        case '0':
            ord = 'th';
            break;
    }
    return num.toString() + ord;
};

$(".ordinal").text(function (i, t) {
    return i.ordinate();
});

JS Fiddle demo.

Edited to offer a slight alternative:

Number.prototype.ordinate = function(){
    var num = this,
        last = num.toString().slice(-1),
        ord = '';
    switch (last) {
        case '1':
            ord = 'st';
            break;
        case '2':
            ord = 'nd';
            break;
        case '3':
            ord = 'rd';
            break;
        default:
            ord = 'th';
            break;
    }
    return num.toString() + ord;
};

$(".ordinal").text(function (i,t) {
    return t.replace(/(\d+)/g, function(a){
        return parseInt(a, 10).ordinate();
    });
});

JS Fiddle demo.

This essentially iterates over each .ordinal element, replacing the numbers present with the (same) numbers with the ordinal suffix added to it.

---

Edited to address the problem, raised in the comments, below, that 11, 12 and 13 were receiving the ordinal suffix of st, nd and rd (respectively). This is now corrected to being th in all cases:

Number.prototype.ordinate = function(){
    var num = this,
        numStr = num.toString(),
        last = numStr.slice(-1),
        len = numStr.length,
        ord = '';
    switch (last) {
        case '1':
            ord = numStr.slice(-2) === '11' ? 'th' : 'st';
            break;
        case '2':
            ord = numStr.slice(-2) === '12' ? 'th' : 'nd';
            break;
        case '3':
            ord = numStr.slice(-2) === '13' ? 'th' : 'rd';
            break;
        default:
            ord = 'th';
            break;
    }
    return num.toString() + ord;
};

JS Fiddle demo.

References:

• slice().
• switch().
• text().
• toString().