Estoy tratando de ordenar los números en un div en orden numérico. Pero aunque el código se ve bien, simplemente no funciona. Así que estoy viendo si alguien tiene alguna idea?
En la página hay varios divs en una página en este formato, todos con el mismo nombre de clase.
<div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div>Estoy tratando de ordenar estos números, en orden numérico al cargar la página. Así que los almacené en una matriz e intenté hacer la función .sort(). Pero todavía no ha funcionado.
$(function() { let textArray = []; $('.class-numbers').contents().each(function () { textArray.push($(this).text()); }); textArray.sort(function(a, b) { return a - b; }); console.log(textArray); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div>El registro de la consola parece registrar en la consola la matriz de cada div con números de clase. ¿Pero no parece ordenarlos numéricamente?
Cualquier ayuda es apreciada.
Está empujando una sola cadena a su matriz con $(this).text() , no los valores individuales. Divida la cadena con textArray = $(this).text().split(',');
Ejemplo:
let textArray = []; $('.class-numbers').each(function() { textArray = $(this).text().split(','); textArray.sort(function(a, b) { return a - b; }); console.log(textArray); $(this).text(textArray.join(', ')) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div> <div class="class-numbers">9, 8, 7, 6, 5, 4, 3, 2, 1</div> <div class="class-numbers">55, 11, 76, 2, 14</div>En función de sus requisitos, que ha aclarado en sus comentarios, desea:
div.class-numbers individualmente Es bastante sencillo: simplemente usa .text() y le pasa una función , que devolverá la matriz ordenada de números. .text() acepta una función y usará el valor de retorno para establecer el texto interno del elemento.
Esta es una de las cosas "mágicas" de jQuery, es que .text() , como muchos otros métodos, recorre implícitamente la colección: ni siquiera necesita usar .each() primero. Estos métodos operan con conjuntos de elementos coincidentes en mente, énfasis mío:
Establezca el contenido de cada elemento en el conjunto de elementos coincidentes con el texto especificado.
Esto nos da el código de la siguiente naturaleza:
$('.class-numbers').text(function(_i, text) { return text.split(',').sort(function(a, b) { return a - b; }).join(','); }); Sin embargo, si está familiarizado con ES6, podemos agrupar todo esto en una sola línea (sacrificando algo de legibilidad y pérdida de referencia a this , que de todos modos no necesitará en este caso):
$('.class-numbers').text((_,t) => t.split(',').sort((a,b) => ab).join(', '));Vea la prueba de concepto a continuación:
$('.class-numbers').text((_,t) => t.split(',').sort((a,b) => ab).join(', ')); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div> <div class="class-numbers">73, 16, 37, 22, 1</div>Por supuesto, siempre hay una solución JS nativa sin necesidad de jQuery;)
document.querySelectorAll('.class-numbers').forEach(el => { el.textContent = el.textContent .split(',') .sort((a,b) => ab) .join(', '); }); <div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div> <div class="class-numbers">73, 16, 37, 22, 1</div>Intente dividir el texto en elementos antes de ordenarlos.
textArray = $(this).text().split(', ')Es posible que también desee convertirlos en números.
textArray = $(this).text().split(', ').map(it => parseInt(it))