2

Tengo un select que al seleccionar una opción llama un código javascript, el código permite ordenar los registro, tomando los datos de la clase product dentro de la clase product-container que es repetitivo para cada resultado.

El script que tengo funciona correctamente con cadenas de texto pero los números no los ordena correctamente, revisando el método sort() entiendo por qué, pero no sé como aplicarlo a este código.

El código que tengo actualmente los ordena de esta manera:

const puntos = [1, 10, 2, 21];
puntos.sort(); // [1, 10, 2, 21]

El número 2 lo cloca después del 10 y allí pierde el orden de menor a mayor, entiendo que de esta manera se resuelve:

const numbers = [4, 2, 5, 1, 3];
    numbers.sort(function (a, b) {
       return a - b;
});

console.log(numbers); // [1, 2, 3, 4, 5]

Pero no sé aplicarlo al código que tengo:

<script>
    $(document).ready(function() {
      $('.spa').click(function(e) {
        e.preventDefault();

        var products = $('.product-container').find('div.product');
        $(products).show();

        var divList = $(".product");
        divList.sort(function(a, b) {
          return String.prototype.localeCompare.call($(a).data('price'), $(b).data('price'));
        });
        
        $(".product-container").html(divList);
      });
    });
</script>

Intenté cosas que se me ocurrieron, por ejemplo:

return $(a).data('price') - $(b).data('price');

también:

return a - b;

también cambié String por Number

return Number.prototype.localeCompare.call($(a).data('price'), $(b).data('price'));

Pero no sé mucho de Javascript y no sé como resolverlo

1 respuesta 1

3

Asumo que lo que guardas en el atributo price es un valor numérico, el precio de algún producto:

$('button').click(function () {
  $('li').sort(function (a, b) {
    return $(a).data("price") - $(b).data("price")
  })
  .appendTo($('ul'))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li data-price="5">5.00 </li>
<li data-price="1.40">1.40 </li>
<li data-price="2.40">2.40 </li>
<li data-price="1.10">1.10 </li>
</ul>
<button>Sort</button>

Al usar la operación resta, Javascript va a convertir los valores en números (no se puede restar texto y a Javascript no le gusta generar errores, así que intenta cambiar el tipo a lo que pueda operar). Tras eso, con la función de jQuery appendTo los elementos son "sacados" del documento y vueltos a insertar en el nuevo orden.

2
  • Muchas gracias! mejoró pero aún tengo unos pequeños errores. Pero si es la solución, debo revisar mi código.
    – Joe
    Commented el 7 sept. 2023 a las 10:34
  • Gracias, ya está resuelto. Tenía una cadena de texto para agregar los decimales a los número, al quitarlos funcionó perfectamente.
    – Joe
    Commented el 7 sept. 2023 a las 14:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.