Skip to content

Instantly share code, notes, and snippets.

@jakerb

jakerb/ordinal.js

Last active September 4, 2015 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jakerb/12d3267b3e98307d75d1 to your computer and use it in GitHub Desktop.
Save jakerb/12d3267b3e98307d75d1 to your computer and use it in GitHub Desktop.
Download ZIP
Automatically adds ordinals to numbers (1,2,3 -> 1st, 2nd, 3rd)
Raw
ordinal.js
function ordinaljs(e,t){var n=0;if(!e){var n=1;console.log("Ordinal: What should ordinal apply to?")}if(!t){var n=1;console.log("Ordinal: Set Superscript to either on or off.")}if(n!=1){$(e).each(function(){var e=$(this).text();if(t){$(this).html(e+"<sup>"+ordinal_switch(e)+"</sup>")}else{$(this).text(e+ordinal_switch(e))}})}}function ordinal_switch(e){var t=parseInt(e.slice(-1));if($.isNumeric(t)){switch(t){case 0:return"th";break;case 1:return"st";break;case 2:return"nd";break;case 3:return"rd";break;default:return"th"}}}
@jakerb
Copy link
Author

jakerb commented Dec 18, 2014

Ordinal.js

Automatically adds ordinals to numbers (22 becomed 22nd, 33 becomes 33rd) within a HTML document using jQuery.

To use this simply, add a selector (<span> in this case) or specific ID or class to the number you wish ordinal.js to modify and instantiate the function.

To instantiate, simply add:
<script>ordinaljs("selector[id/class]","superscript[true/false]");</script>

Here is what a demo page looks like or check it out on Codepen:

<html>
<head>
    <title>Ordinal.js</title>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore <span class="ordinal">322</span> et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor <span>122</span> in reprehenderit <span class="ordinal">9009</span> in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur <span class="ordinal-super">2</span> sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<script src="ordinal.js"></script>
<script>
//Without superscript
ordinaljs("span.ordinal", false);

//With superscript
ordinaljs("span.ordinal-super", true);</script>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment