Question

我试图在带有序数后缀的特定表格中显示数字。该表始终显示来自XML文件的三个数字。数字显示排名，例如他们可能是第6,120,131。输出是一个如下所示的表：

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

我最好使用javascript，我在stackoverflow上找到了一些非常好的解决方案，例如this one。但是，我正在努力将该函数应用于表中的所有数字，而不是单独输入每个数字。我尝试使用CSS类，以便我的函数看起来像这样：

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

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

非常感谢你的帮助！

Answer 1

我自己的建议是：

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

这实际上采用递增的数字（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();
});

JS Fiddle demo

编辑提供一个轻微的选择：

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

这基本上遍历每个.ordinal元素，用添加了序号后缀的（相同）数字替换存在的数字。

已编辑以解决以下评论中提出的问题：11，12和13正在接收{{1}的序数后缀}，st和nd（分别）。在所有情况下，现在更正为rd：

th

JS Fiddle demo

参考文献：

Answer 2

function nth(n){
    if(isNaN(n) || n%1) return n;   
    var s= n%100;
    if(s>3 && s<21) return n+'th';
    switch(s%10){
        case 1: return n+'st';
        case 2: return n+'nd';
        case 3: return n+'rd';
        default: return n+'th';
    }
}

你可以照顾自己的行中的青少年，其他整数遵循最后的数字规则。

Answer 3

我使用Prototype创建了两种方法，另一种是插件：

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

这是一个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();

在JSFIDDLE上测试：

原型版本示例：http://jsfiddle.net/f8vQr/6/

JQuery版本示例：http://jsfiddle.net/wCdKX/27/

Answer 4

它无效，因为您将字符串返回$.each，而不是实际使用它们。用法取决于您的HTML，但以下是将.ordinal文本设置为值的示例。

您还错过了事件处理程序上的i参数，您可以将i增加到1st而不是0th。

jsFiddle

$(".ordinal").each(function (i) {
    i++;
    var j = i % 10,
        str;
    if (j == 1 && i != 11) {
        str = i + "st";
    } else if (j == 2 && i != 12) {
        str = i + "nd";
    } else if (j == 3 && i != 13) {
        str = i + "rd";
    } else {
        str = i + "th";
    }
    $(this).text(str);
});

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

jsFiddle

$(document).ready(function () {
    $(".ordinal").each(function (i) {
        var j = parseInt($('ordinal').text(), 10) % 10,
            str;
        if (j == 1 && i != 11) {
            str = "st";
        } else if (j == 2 && i != 12) {
            str = "nd";
        } else if (j == 3 && i != 13) {
            str = "rd";
        } else {
            str = "th";
        }
        var elem = $(this)
        elem.text(elem.text() + str);
    });
});

Answer 5

一行中的序号后缀

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

原始数字的串联和表示从该数字的正则表达式搜索结果索引的数组派生的序数的字符串

http://jsfiddle.net/thisishardcoded/DbSMB/

Answer 6

根据David Thomas的回答，我会做这样的事情：

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

它完成了同样的事情。如果数字的最后2位数在11-19范围内或最后一位数在4-0之间，则默认为'th'，否则它将从数组中拉出'st'，'nd'或'rd'在那个地方。

我非常喜欢创建原型函数的想法，但我肯定会将索引的增量留在原型函数之外，以使其更加通用：

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

JS Fiddle Demo

Answer 7

function ordsfx(a){return["th","st","nd","rd"][(a=~~(a<0?-a:a)%100)>10&&a<14||(a%=10)>3?0:a]}

请参阅https://gist.github.com/furf/986113#file-annotated-js

上的注释版本

简短，甜美，高效，就像实用功能一样。适用于任何有符号/无符号整数/浮点数。（尽管我无法想象需要对漂浮物进行规范化）

Answer 8

这是我使用的方法，它适用于包括年，月，日（le年）的任何年份：

CMD ["./start.sh"]

与

一起使用

// 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]); }

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

8 个答案: