11

序数のサフィックスを使用して、特定のテーブル内に数値を表示しようとしています。テーブルには常に、XML ファイルから取得した 3 つの数値が表示されます。数字は順位を表すので、例えば6位、120位、131位となります。出力は、次のようなテーブルです。

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

理想的にはjavascriptを使用したいと思います.stackoverflowでいくつかの非常に優れたソリューションを見つけました。ただし、各数値を個別に入力するのではなく、テーブル内のすべての数値に関数を適用するのに苦労しています。関数が次のようになるように、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>

おそらくどこかでコードを台無しにしたため、機能していません。たぶん、ここの誰かが私を助けて、どこが間違っていたのか教えてくれませんか?

ご助力ありがとうございます！

4

8 に答える 8

12

私自身の提案は次のとおりです。

$(".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 フィドルのデモ。

これは事実上、インクリメントされた数値 ( noti++から開始するために) を取得し、それを文字列に変換してから、その文字列の最後の番号を調べます。序数は純粋にその最後の数値に基づいているため、これは任意の数値に対して機能するはずです。10

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 フィドルのデモ。

わずかな代替手段を提供するために編集されました：

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および12(それぞれ)13の序数接尾辞を受け取っていました。これは、すべての場合に修正されるようになりました。stndrdth

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 フィドルのデモ。

参考文献:

于 2013-04-04T12:04:01.833 に答える
1

1 行の序数サフィックス

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

元の数値と、その数値の正規表現検索の結果によってインデックス付けされた配列から派生した序数を表す文字列との連結

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

于 2013-05-01T10:23:14.820 に答える
1

$.each文字列を実際に使用しているのではなく、 に返しているため、機能していません。使用法は HTML によって異なりますが、ここでは.ordinalテキストを値に設定する例を示します。

また、イベント ハンドラーのパラメーターが欠落しており、代わりにから開始するようにiインクリメントできます。i1st0th

jsフィドル

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

要素にすでに数値がある場合は、インデックスに依存せず、代わりに数値を確認してから、文字列を末尾に追加することをお勧めします。

jsフィドル

$(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);
    });
});
于 2013-04-04T11:37:24.233 に答える
0

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 フィドルのデモ

于 2013-05-30T05:11:34.117 に答える
0

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で注釈付きのバージョンを参照してください

ユーティリティ関数のように、短く、甘く、効率的です。符号付き/符号なしの整数/浮動小数点数で動作します。（フロートを順序化する必要があるとは想像できませんが）

于 2013-09-27T00:08:48.917 に答える