Javascript：具有特定CSS类的数字的序数后缀
我试图在带有序数后缀的特定表格中显示数字。 该表始终显示来自XML文件的三个数字。 数字显示排名，例如他们可能是第6,120,131。 输出是一个如下所示的表：
6 120 131
我理想地想使用javascript，我在stackoverflow上找到了一些非常好的解决方案，例如这个 。 但是，我正在努力将该函数应用于表中的所有数字，而不是单独输入每个数字。 我尝试使用CSS类，以便我的函数看起来像这样：
$(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"; }); })
但它不起作用，可能是因为我把代码搞砸了。 也许这里有人可以帮助我，告诉我哪里出错了？
非常感谢您的帮助！
我自己的建议是：
$(".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小提琴演示 。
这有效地采用递增的数字（ i++ ，从1开始而不是0 ），将其转换为字符串，然后查看该字符串的最后一个数字。 这适用于任何数字，因为序数完全基于最后一个数字。
您还可以扩展Number原型以实现此function：
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小提琴演示 。
编辑提供一个轻微的选择：
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小提琴演示 。
这基本上遍历每个.ordinal元素，用添加了序数后缀的（相同）数字替换存在的数字。
编辑以解决在下面的评论中提出的问题，即11和13分别接收st ， nd和rd的序数后缀（分别）。 现在，在所有情况下都将其更正为：
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小提琴演示 。
参考文献：
-
slice()。 -
switch()。 -
text()。 -
toString()。
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'; } }
你可以按照自己的行来照顾青少年，其他整数遵循最后的数字规则。
我用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/
它不起作用，因为你将字符串返回到$.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); }); });
序号后缀在一行中
var integerWithSuffix=originalInteger+(['st','nd','rd'][( originalInteger +'').match(/1?\d\b/)-1]||'th');
原始数字和一个字符串的串联，该字符串表示从该数字的正则表达式搜索结果索引的数组派生的序数
根据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小提琴演示
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上的注释版本
简短，甜美，高效，就像实用function一样。 适用于任何有符号/无符号整数/浮点数。 （尽管我无法想象需要对浮子进行规范化）