1

Estoy tratando de ordenar un listado de elementos con jquery:

<ul>
   <li>Brazo</li>
   <li>Pierna</li>
   <li>Cara</li>
   <li>Boca</li>
   <li>Uña</li>
</ul>

Primero recojo la lista y la convierto en array, a continuación, guarda una variable auxiliar para trabajar con ella posteriormente y borro el listado. Finalmente mi intención en ordenar por orden alfabetico el listado y volver a imprimirlo por pantalla, pero por alguna razón no me funciona el .sort() correctamente, para jquery como se haría?

 var $listaArray = $('ul > li').toArray();
 var $aux = $listaArray;
 $($listaArray).remove();
 var $nuevaLista = ($aux).sort();
 $('ul').before($nuevaLista);

3 respuestas 3

3

Algunas observaciones:

  1. No funciona ordenar elementos de HTML, lo que sí se puede es ordenar por el texto que contienen.
  2. No necesitas (ni debes) limpiar el contenido de la lista, tanto .before() como .append() no crean copias, solo toman el elemento de la posición donde se encuentra y lo colocan donde le digas. Trabajan igual que .appendChild().
  3. Tampoco se requiere crear una nueva variable .sort() modifica el arreglo original directamente.
  4. No es necesario que antepongas el signo $ para definir tus variables en Javascript.

var listaArray = $('ul > li').toArray();
listaArray.sort((a, b) => {
    // Comparar contenido de los elementos
    return a.textContent.localeCompare(b.textContent);
});
$('ul').append(listaArray);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
   <li>Brazo</li>
   <li>Pierna</li>
   <li>Cara</li>
   <li>Boca</li>
   <li>Uña</li>
</ul>

2
  • No sabia que append no crea copias, por otro lado es necesario poner el $ para definir una variable? Si no es asi, creo que es mejor aclarar eso al op como mejora el 25 ene. 2021 a las 22:04
  • @JuanRivera, solo en PHP es necesario el $ para definir variables. OP así las define y las dejé como estaban, pero tienes razón, es una buena aclaración. Gracias por la observación.
    – Triby
    el 25 ene. 2021 a las 22:07
1

let $arr = [];
$("div").each((i, el) => {
  $arr.push(el.innerHTML)
});
$arr.sort()
console.log($arr)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>One</div>
<div>Two</div>
<div>Three</div>

Lo que haces con .toArray es obtener todos los elementos en un array, pero no obtienes el contenido, haz un each para recorrer los elementos, hacer un push en el array para insertar nuevos items, y finalmente un .sort() para ordenar alfabéticamente el array

1

Primeramente $listaArray contiene el objeto que devuelve jquery del selector que has declarado ('ul > li'), y luego lo encapsulas en un Array. Luego realizas un sort sobre este array, lo cual no funciona como esperas

Para lograr lo que dices, es decir ordenar los valores de cada elemento li dentro de ul, debes hacer esto

let listaArray = $('ul').children().toArray();
let listaValores = [];

listaArray.forEach(item =>
{
listaValores.push(item.innerText);
});

listaValores.sort();

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.