Je souhaite générer dynamiquement une chaîne de texte basée sur un jour en cours. Ainsi, par exemple, si c'est le jour 1, je voudrais que mon code génère = "C'est le <dynamic> 1 * <dynamic string> st </ dynamic string> * </dynamic>".
Il y a 12 jours au total, j'ai donc fait ce qui suit:
J'ai mis en place une boucle for qui parcourt les 12 jours.
Dans mon html, j'ai donné à mon élément un identifiant unique avec lequel le cibler, voir ci-dessous:
<h1 id="dynamicTitle" class="CustomFont leftHeading shadow">On The <span></span> <em>of rest of generic text</em></h1>
Ensuite, dans ma boucle for, j'ai le code suivant:
$("#dynamicTitle span").html(i); var day = i; if (day == 1) { day = i + "st"; } else if (day == 2) { day = i + "nd" } else if (day == 3) { day = i + "rd" }
METTRE À JOUR
C'est la boucle for entière comme demandé:
$(document).ready(function () {
for (i = 1; i <= 12; i++) {
var classy = "";
if (daysTilDate(i + 19) > 0) {
classy = "future";
$("#Day" + i).addClass(classy);
$("#mainHeading").html("");
$("#title").html("");
$("#description").html("");
} else if (daysTilDate(i + 19) < 0) {
classy = "past";
$("#Day" + i).addClass(classy);
$("#title").html("");
$("#description").html("");
$("#mainHeading").html("");
$(".cta").css('display', 'none');
$("#Day" + i + " .prizeLink").attr("href", "" + i + ".html");
} else {
classy = "current";
$("#Day" + i).addClass(classy);
$("#title").html(headings[i - 1]);
$("#description").html(descriptions[i - 1]);
$(".cta").css('display', 'block');
$("#dynamicImage").attr("src", ".." + i + ".jpg");
$("#mainHeading").html("");
$(".claimPrize").attr("href", "" + i + ".html");
$("#dynamicTitle span").html(i);
var day = i;
if (day == 1) {
day = i + "st";
} else if (day == 2) {
day = i + "nd"
} else if (day == 3) {
day = i + "rd"
} else if (day) {
}
}
}
javascript
jquery
numbers
Antonio Vasilev
la source
la source
if
bloc qui est en outre contenu par la boucle? Afficher plus de code ....Réponses:
Les règles sont les suivantes:
Le code JavaScript suivant (réécrit en juin 14) accomplit ceci:
Exemple de sortie pour les nombres compris entre 0 et 115:
la source
111
,112
et113
devrait entraîner"111th"
,"112th"
et"113th"
respectivement, pas la"111st"
,"112nd"
et"113rd"
produit par la fonction telle qu'elle est actuellement codé.n=>n+(n%10==1&&n%100!=11?'st':n%10==2&&n%100!=12?'nd':n%10==3&&n%100!=13?'rd':'th')
de Shopify
la source
Approche minimale sur une ligne pour les suffixes ordinaux
(c'est pour les entiers positifs, voir ci-dessous pour d'autres variations)
Explication
Commencez par un tableau avec les suffixes
["st", "nd", "rd"]
. Nous voulons mapper les entiers se terminant par 1, 2, 3 (mais ne se terminant pas par 11, 12, 13) aux index 0, 1, 2.D'autres entiers (y compris ceux se terminant par 11, 12, 13) peuvent être mappés à n'importe quoi d'autre - les index non trouvés dans le tableau seront évalués
undefined
. C'est faux en javascript et avec l'utilisation de logique ou (|| "th"
), l'expression retournera"th"
pour ces entiers, ce qui est exactement ce que nous voulons.L'expression
((n + 90) % 100 - 10) % 10 - 1
fait le mappage. Décomposer:(n + 90) % 100
: Cette expression prend l'entier d'entrée - 10 mod 100, mappant 10 à 0, ... 99 à 89, 0 à 90, ..., 9 à 99. Maintenant, les entiers se terminant par 11, 12, 13 sont au plus bas end (mappé sur 1, 2, 3).- 10
: Maintenant 10 est mappé à −10, 19 à −1, 99 à 79, 0 à 80, ... 9 à 89. Les entiers se terminant par 11, 12, 13 sont mappés à des entiers négatifs (−9, −8, −7).% 10
: Maintenant, tous les entiers se terminant par 1, 2 ou 3 sont mappés à 1, 2, 3. Tous les autres entiers sont mappés à quelque chose d'autre (11, 12, 13 sont toujours mappés à -9, -8, -7).- 1
: En soustrayant un, on obtient le mappage final de 1, 2, 3 à 0, 1, 2.Vérifier que cela fonctionne
Variations
Autoriser les entiers négatifs:
Dans la syntaxe de la grosse flèche ES6 (fonction anonyme):
Mettre à jour
Une alternative encore plus courte pour les entiers positifs est l'expression
Voir cet article pour une explication.
Mise à jour 2
la source
Vous pouvez utiliser les fonctions de données locales des bibliothèques moment .
Code:
la source
Intl.PluralRules
, la méthode standard .Je voudrais simplement laisser tomber la manière canonique de faire cela ici, car personne ne semble le savoir.
Intl.PluralRules
constructeur (Draft ECMA-402)la source
Vous n'avez que 12 jours? Je serais tenté d'en faire juste un simple tableau de recherche:
puis
ou
la source
$("#dynamicTitle span").html(suffix[i-1]);
En divisant le nombre dans un tableau et en inversant, nous pouvons facilement vérifier les 2 derniers chiffres du nombre en utilisant
array[0]
etarray[1]
.Si un nombre est dans l'adolescence,
array[1] = 1
il faut "th".la source
la source
n - 1
pièce (renvoie undefined). Échoue également pour les nombres supérieurs à 110, par exemplegetSuffix(111)
renvoie "st". Cela résout le problème du PO où les nombres vont de 1 à 12, mais ce n'est pas une solution générale. :-(J'ai écrit cette fonction pour résoudre ce problème:
Avec cela, vous pouvez simplement mettre
.addSuffix()
n'importe quel nombre et cela donnera ce que vous voulez. Par exemple:la source
number
cette chaînevar lastDigits=n.substring(number.length-2);
devrait être remplacée parthis
n
place dethis
, mais merci d'avoir signalé ce bug! :)Une version alternative de la fonction ordinale pourrait être la suivante:
Les variables sont nommées plus explicitement, utilisent la convention de casse camel et peuvent être plus rapides.
la source
J'ai écrit cette fonction simple l'autre jour. Bien que pour une date, vous n'ayez pas besoin des plus grands nombres, cela prendra également en charge des valeurs plus élevées (1013e, 36021e etc ...)
la source
function ordsfx(a){return["th","st","nd","rd"][(a=~~(a<0?-a:a)%100)>10&&a<14||(a%=10)>3?0:a]}
Voir la version annotée sur https://gist.github.com/furf/986113#file-annotated-js
Courte, douce et efficace, tout comme les fonctions utilitaires devraient l'être. Fonctionne avec n'importe quel entier / flottant signé / non signé. (Même si je ne peux pas imaginer un besoin d'ordinaliser les flotteurs)
la source
Voici une autre option.
Remarquez l'exception pour les adolescents? Les adolescents sont si méchants!
Edit: j'ai oublié les 11 et 12
la source
Je voulais apporter une réponse fonctionnelle à cette question pour compléter la réponse existante:
nous avons créé un tableau des valeurs spéciales, la chose importante à retenir est que les tableaux ont un index basé sur zéro donc ordinalSuffix [0] est égal à «st».
Notre fonction numberToOrdinal vérifie si le nombre se termine par un nombre d'adolescent, auquel cas ajoutez le nombre avec «th» car tous les nombres ordinaux sont «th». Dans le cas où le nombre n'est pas un adolescent, nous passons le nombre à addSuffix qui ajoute le nombre à l'ordinal qui est déterminé par si le nombre moins 1 (car nous utilisons un index basé sur zéro) mod 10 a un reste de 2 ou moins, il est pris dans le tableau, sinon c'est «th».
exemple de sortie:
la source
Ancien que j'ai fait pour mes affaires ...
la source
Je recommande vivement l'excellente bibliothèque date-fns . Rapide, modulaire, immuable, fonctionne avec des dates standard.
Voir la documentation date-fns: https://date-fns.org/v2.0.0-alpha.9/docs/format
la source
J'ai écrit cette fonction pour des nombres plus élevés et tous les cas de test
la source
Voici une approche légèrement différente (je ne pense pas que les autres réponses le font). Je ne sais pas si je l'aime ou le déteste, mais ça marche!
la source
Ceci est pour un liners et les amateurs d'es6
Une autre option pour + serait le nombre serait:
Aussi pour se débarrasser du préfixe ordinal, utilisez simplement ceux-ci:
n'hésitez pas à modifier selon vos besoins
la source
Vous pouvez également utiliser la
scales::ordinal()
fonction. C'est simple et rapide à utiliser.la source
Je recommande fortement cela, c'est super facile et simple à lire. J'espère que ça aide?
PRODUCTION
la source
Vous pouvez utiliser
1<sup>st</sup> 2<sup>nd</sup> 3<sup>rd</sup> 4<sup>th</sup>
pour positionner le suffixe
la source