Esta secuencia de comandos se ha transmitido en Tumblr durante años, para acortar el recuento de notas mostradas en las publicaciones del blog:
var $container = $(".content"); $container.find(".notecount").each(function () { var n = $(this).html().split(" ")[0].replace(/,/g, ""); if (n > 999) { n = Math.floor(n / 100) / 10; $(this).text(n + "k notes"); } });Soy bastante nuevo en js, pero me parece un poco exagerado implementar jquery para cambiar (hasta) 15 números en una página solo por ese buen truco, y me preguntaba si podría prescindir de él.
Lo siguiente está adaptado en su mayoría de este codepen , pero 1, sé que solo afecta a la primera clase en cada página (probé getElementsByClassName y querySelectorAll ) y 2, mi indicador es que posiblemente tendré que hacer un bucle, no sé cómo Repita la función, así que me pregunto si eso es factible o no:
var tnotes = document.querySelector(".notecount"); function ShortenIt(value) { var retVal = ""; if (value < 2) { retVal = String(value) + " note"; } if (value >= 2 && value < 1000) { retVal = value + " notes"; } if (value >= 1000 && value < 1000000) { retVal = Math.round(value / 1000) + "k notes"; } if (value >= 1000000 && value < 1000000000) { retVal = Math.round(value / 1000000) + "m notes"; } tnotes.innerHTML = retVal; } ShortenIt(tnotes.innerText);Estructura de cada puesto:
<article class="post {PostType}" id="{PostID}"> <div>post content</div> <div class="info"> <div class="notecount"><a href="{Permalink}">{NoteCount}</a></div> </div> </article>He revisado bastantes preguntas/respuestas aquí, pero me quedé corto o todavía tuve problemas para apuntar solo al recuento de notas y no a números aleatorios en una publicación de blog. Cualquier ayuda o dirección sería muy apreciada.
Todos esos métodos jQuery están disponibles en Vanilla JS de una forma u otra (jQuery, después de todo, es solo una abstracción además de estos métodos de manipulación DOM). Consulte los documentos de MDN para conocer algunas formas comunes de iterar sobre una matriz.
const convertNoteCounts = () => { // querySelectorAll returns a NodeList... const myListOfElements = document.querySelectorAll(".notecount"); // ... so we'll convert it to an Array and iterate over it Array.from(myListOfElements).forEach((noteCountEl) => { // grab the first child, which in our DOM will always be an <a /> element let element = noteCountEl.children[0]; let n = Number(element.innerText.split(" ")[0].replace(/,/g, "")); if (n > 999) { n = Math.floor(n / 100) / 10; element.innerText = `${n}k`; } }) } <article class="post {PostType}" id="{PostID}"> <div>post content</div> <div class="info"> <div class="notecount"><a href="#">863</a></div> <div class="notecount"><a href="#">102</a></div> <div class="notecount"><a href="#">1,400</a></div> <div class="notecount"><a href="#">9,459</a></div> <div class="notecount"><a href="#">12,450</a></div> </div> <button onclick="convertNoteCounts()">Convert!</button> </article>