Javascript：具有特定CSS类的数字的序号后缀

我试图用序号后缀在特定表中显示数字。该表始终显示来自XML文件的三个数字。这些数字显示等级，例如，它们可能是第6、120、131位。输出是一个如下所示的表：

<table>
    <tr>
        <td class='ordinal'>6</td>
        <td class='ordinal'>120</td>
        <td class='ordinal'>131</td>
    </tr>
</table>

<script type="text/javascript">
$(function(){
    $(".ordinal").each(function(){
        var j = i % 10;
        if (j == 1 && i != 11) {
            return i + "st";
        }
        if (j == 2 && i != 12) {
            return i + "nd";
        }
        if (j == 3 && i != 13) {
            return i + "rd";
        }
        return i + "th";
        });
})
</script>

6.
120
131

我很想使用javascript，例如，我在stackoverflow上找到了一些非常好的解决方案。但是，我很难将该函数应用于表中的所有数字，而不是单独输入每个数字。我尝试使用CSS类，因此我的函数如下所示：

<table>
    <tr>
        <td class='ordinal'>6</td>
        <td class='ordinal'>120</td>
        <td class='ordinal'>131</td>
    </tr>
</table>

<script type="text/javascript">
$(function(){
    $(".ordinal").each(function(){
        var j = i % 10;
        if (j == 1 && i != 11) {
            return i + "st";
        }
        if (j == 2 && i != 12) {
            return i + "nd";
        }
        if (j == 3 && i != 13) {
            return i + "rd";
        }
        return i + "th";
        });
})
</script>

$（函数（）{
$（“.ordinal”）.each（function（）{
var j=i%10；
如果（j==1&&i！=11）{
返回i+“st”；
}
如果（j==2&&i！=12）{
返回i+“nd”；
}
如果（j==3&&i！=13）{
返回i+“rd”；
}
返回i+“th”；
});
})

但它不起作用，可能是因为我把代码搞砸了。也许这里有人能帮我，告诉我哪里出了错

---

非常感谢你的帮助

它不起作用，因为您正在将字符串返回到

$。每个
，而不是实际使用它们。用法取决于HTML，但下面是一个将
.ordinal
文本设置为该值的示例

您还缺少事件处理程序上的
i
参数，您可以增加
i
以从
1st
开始，而不是从
0th
开始


如果元素中已经有数字，那么最好不要依赖索引，而是检查数字，然后将字符串追加到末尾


我个人的建议是：

$(".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;
});


这将有效地获取递增的数字（
i++
，以便从
1
开始，而不是
0
），将其转换为字符串，然后查看该字符串的最后一个数字。这适用于任何数字，因为序数完全基于最后一个数字

您还可以扩展
Number
原型以实现此功能：

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();
});


经过编辑，提供了一个轻微的替代方案：

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();
    });
});


这实际上是在每个
.ordinal
元素上迭代，用添加了序号后缀的（相同）数字替换当前的数字


编辑以解决以下评论中提出的问题，即
11
、
12
和
13
分别接收顺序后缀
st
、
nd
和
rd
。现在，在所有情况下，这被更正为
th
：

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;
};


参考资料：






函数n（n）{
if（isNaN（n）| n%1）返回n；
var s=n%100；
如果（s>3&&s一行中的顺序后缀

var integerWithSuffix=originalInteger+(['st','nd','rd'][( originalInteger +'').match(/1?\d\b/)-1]||'th');

原始数字和一个字符串的串联，该字符串表示从一个数组中派生的序号，该数组由对该数字的正则表达式搜索结果索引

根据大卫·托马斯的回答，我会这样做：

Number.prototype.ordinate = function(){
    var num = this,
        ones = num % 10, //gets the last digit
        tens = num % 100, //gets the last two digits
        ord = ["st","nd","rd"][ tens > 10 && tens < 20 ? null : ones-1 ] || 'th';
    return num.toString() + ord;
};

我创建了两种方法，一种是使用原型，另一种是作为插件：

Number.prototype.between = function(n,m){ return this > n && this < m }
Number.prototype.ORDINATE_INDEX = ["th","st","nd","rd"];
Number.prototype.toOrdinate = function(){
    var
        nthMod = (this % 10),
        index =  nthMod > 3 || this.between(10,20) ? 0 : nthMod
    ;

    return this + this.ORDINATE_INDEX[index];
};

$(".ordinal").text(function (index, element) {
    return parseInt(element).toOrdinate();
});

Number.prototype.between=函数（n，m）{返回this>n&&this3 | |这个。介于（10,20）之间？0:nthMod
;
返回this+this.纵坐标索引[INDEX]；
};
$（“.ordinal”）.text（函数（索引，元素）{
返回parseInt（element.toOrdinate（）；
});

这是一个Jquery插件：

(function($){
    var numberTool = new (function(){
        var private = {};

        private.ORDINATE_INDEX = ["th","st","nd","rd"];

        private.parseOrdinary = function(number)
        {
            var
                nthMod = (number % 10),
                index =  nthMod > 3 || private.between(number, 10,20) ? 0 : nthMod
            ;

            return number + private.ORDINATE_INDEX[index];
        }

        private.between = function(number, n,m){
            return number > n && number < m
        }

        this.isNumeric = function(number)
        {
            return !isNaN(parseFloat(number)) && isFinite(number);
        }

        this.toOrdinary = function(number)
        {
            return this.isNumeric(number) ? private.parseOrdinary(number) : number;
        }
    });


    $.fn.toOrdinary = function(){
        return this.each(function(){
            $element = $(this);
            $element.text(numberTool.toOrdinary($element.text()));
        }); 
    };
})(jQuery);

$(".ordinal").toOrdinary();
$(".ordinal").toOrdinary();
$(".ordinal").toOrdinary();

（函数（$）{
var numberTool=new（函数（）{
var private={}；
private.ordination_INDEX=[“th”、“st”、“nd”、“rd”]；
private.parseNormal=函数（编号）
{
变量
nthMod=（编号%10），
index=nthMod>3 | | private.between（数字，10,20）？0:nthMod
;
返回编号+专用.纵坐标索引[索引]；
}
private.between=函数（数字，n，m）{
返回编号>n&&编号

在JSFIDLE上测试：

原型版本示例：

JQuery版本示例：
函数ordsfx（a）{return[“th”，“st”，“nd”，“rd”][（a=~（a10&&a3？0:a）]}

请参见第页的注释版本

短小、甜美、高效，就像实用程序函数一样。适用于任何有符号/无符号整数/浮点。（尽管我无法想象需要对浮点进行排序）
这就是我所使用的，适用于任何年份、月份、日期（闰年）包括：

// panelyear, panelmonth and panelday are passed as parameters

var PY01 = parseInt(panelyear); var PM01 = (parseInt(panelmonth) - 1); PD01 = parseInt(panelday);

var now = new Date(PY01, PM01, PD01);
var start = new Date(PY01, 0, 0);
var diff = (now - start) + ((start.getTimezoneOffset() - now.getTimezoneOffset()) * 60 * 1000);
var oneDay = 1000 * 60 * 60 * 24;
var day = Math.floor(diff / oneDay);

function getNumberWithOrdinal(n) { var s = ["th","st","nd","rd"], v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]); }

配合使用

<script> document.write(getNumberWithOrdinal(day)); </script>

document.write（getNumberWithOrdinal（day））；
太棒了，谢谢，这很有效！但是，现在我遇到了一个问题，即每个数字，例如132，都返回为第17位，而不是第132位。我的数字增加到200多位。你知道错误的根源吗？对我来说很好。你在代码中遗漏了什么吗？啊，我在看到I++之前问了这个问题，对不起。但是，没有返回这是简单的第一、第二、第三个数字，不是第17、第132、第146个数字。我通过一个XML文档输入这些数字，以防万一，这会产生不同！那么代码
// panelyear, panelmonth and panelday are passed as parameters

var PY01 = parseInt(panelyear); var PM01 = (parseInt(panelmonth) - 1); PD01 = parseInt(panelday);

var now = new Date(PY01, PM01, PD01);
var start = new Date(PY01, 0, 0);
var diff = (now - start) + ((start.getTimezoneOffset() - now.getTimezoneOffset()) * 60 * 1000);
var oneDay = 1000 * 60 * 60 * 24;
var day = Math.floor(diff / oneDay);

function getNumberWithOrdinal(n) { var s = ["th","st","nd","rd"], v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]); }

<script> document.write(getNumberWithOrdinal(day)); </script>