Home / Questions / 259945
Accepted
scorpions
Asked: 2020-05-02 08:04:14 +0800 CST 2020-05-02 08:04:14 +0800 CST

Sort ul javascript

  • 772

i am trying to command a ul with javascript. But I run into the problem that it doesn't order it and part of it only captures two li, my current code is as follows:

function ordenarLista(){

    var vaciar = '';
    var ul = document.getElementById("listaCanciones");
    var li = document.createElement("li");
    var arrayCanciones = new Array();
    var lista = ul.getElementsByTagName("li");

    //lista la transformamos en un array
    for(var i=0; i<lista.length;i++){
        //para añadir elementos a un array push
        arrayCanciones.push(lista[i]);
        //ordenamos el array
        console.log(arrayCanciones.sort());
        //agragamos las canciones a la lista
        li.appendChild(arrayCanciones[i]);
    }

    //pinchamos li en el DOM
    ul.appendChild(li);
}

The first image shows the data entry of a simple form. input form

the second the result of clicking sort and the resulting console.log.

result

I do not know why it only captures two li and does not order.

I appreciate all help.

javascript

2 Answers

  1. Best Answer

    I pass you this solution with comments of the steps followed and based on this SO answer.

    function ordenarLista(idUl){
    //Obtenemos el elemento ul
    let ul = document.getElementById(idUl);    
    //Obtenemos la lista de li
    let lista = ul.getElementsByTagName("li");
    //Creamos el array a partir de los elementos li
    //A continuación ordenamos con sort (hay que ordenar mirando el textContent y evitando la etiqueta li
    //Por último recorremos el array ya ordenado y vamos haciendo el append en el elemento ul (sobrescribiéndolo)
    let arrayCanciones = Array.from(lista);
    arrayCanciones.sort((a, b) => a.textContent.localeCompare(b.textContent))
    .forEach(li => ul.appendChild(li));
   
}

ordenarLista("listaCanciones");
    <ul id="listaCanciones">
<li>zzz</li>
<li>aaa</li>
<li>bbb</li>
</ul>

    • 3

  2. Although you already have an answer, I want to supplement it with the following solution.

    I don't know exactly how you're adding and removing elements to your element ul, so I've implemented my own methods.

    In the method sortSongs, I simply use a function that performs the check on the Arrayof childNodes. In this comparison I order in ascending order.

    On the other hand, every time an element is added to ul, I assign an attribute idto it dynamically using Date.now, so I can choose the element to remove.

    const addSong = (event) => {
  event.preventDefault();
  const song = document.getElementById('song').value;
  if(!song || song == '') return;
  let newSong = document.createElement('li');
  newSong.setAttribute('id', Date.now().toString());
  newSong.innerText = song;
    songs.appendChild(newSong);
}

const removeSong = (event) => {
  event.preventDefault();
  if(songs.hasChildNodes()) {
    const song = document.getElementById('song').value;
    if(!song || song == '') return;
    let id;
    songs.childNodes.forEach((node) => {
      if(node.innerText == song) {
        id = node.getAttribute('id');
      }
    });
    if(!id) return;
    removedSong = document.getElementById(id);
    songs.removeChild(removedSong);
  }
}

const sortSongs = (event) => {
  event.preventDefault();
  if(songs.hasChildNodes()) {
    let sorted = [];
    songs.childNodes.forEach((child) => {
      sorted.push(child);
      sorted.sort(function(a,b) {
        return a.innerText == b.innerText ? 0 : (a.innerText < b.innerText ? -1 : 1);
      });
    });
    for(let i = 0; i < sorted.length; i++) {
      songs.appendChild(sorted[i]);
    }
  }
}

let songs = document.getElementById('songs');
let addButton = document.getElementById('add');
let sortButton = document.getElementById('sort');
let removeButton = document.getElementById('remove');
addButton.addEventListener('click', addSong);
sortButton.addEventListener('click', sortSongs);
removeButton.addEventListener('click', removeSong);
    input, button {
  margin-right: 0.2rem;
  }
    <div>
  <input type="text" id="song"></input>
  <button type="button" id="add">Añadir</button>
  <button type="button" id="sort">Ordenar</button>
  <button type="button" id="remove">Eliminar</button>
  <br>
  <ul id="songs"></ul>
</div>

    • 0