4

Estou a tentar ordenar o array pela propriedade de estilo order.

Eis a minha tentativa:

var interval = setInterval(() => {
  var letterDivs = gameBox.getElementsByClassName("wordBox")[0].childNodes;

  console.log([...letterDivs]);

  [...letterDivs].sort((a, b) => {
    (a.style.order > b.style.order) ? 1 : -1;
  });
  console.log(letterDivs);
}, 300);

O último console.log não retorna a lista ordenada. Por quê? Como é que eu ordeno a lista?

2
  • (a.style.order > b.style.order) ? 1 : -1; => return (a.style.order > b.style.order) ? 1 : -1;? 15/01/2021 às 14:08
  • 1
    Não colocarei essa observação na minha resposta porque sai um pouco do escopo da pergunta, mas eu repensaria a necessidade de se fazer o sort da lista a cada 300 milissegundos. Operação de classificação de arrays são relativamente custosas para listas com muito elementos (complexidade grande-O O(n log n)), então verifique se não há como fazer esse tipo de coisa fora do setInterval. :) 15/01/2021 às 14:31

1 Resposta 1

3

A propriedade <elm>.style.order retorna uma string com o valor definido na propriedade CSS order do elemento em questão.

Como é uma string, você deve se preocupar em convertê-la ao tipo adequado (número), uma vez que os operadores de comparação (como >) comparam strings de modo lexicográfico (então, por exemplo, '11' < '100' retornaria false, o que é um absurdo do ponto de vista numérico).

Posto isso, você pode fazer algo assim:

const letterDivs = document.querySelectorAll('.wordBox > *');

const sorted = [...letterDivs].sort((a, b) => {
  const aNum = parseInt(a.style.order, 10);
  const bNum = parseInt(b.style.order, 10);
  
  // Irá jogar aqueles com `order` inválido para o final.
  if (Number.isNaN(aNum)) return 1;
  if (Number.isNaN(bNum)) return -1;
  
  // Ordena de ordem crescente:
  return aNum - bNum;
});

console.log(sorted.map((el) => el.textContent));
<div class="wordBox">
  <span style="order: 4">4</span>
  <span style="order: 2">2</span>
  <span>Sem Order</span>
  <span style="order: 3">3</span>
  <span style="order: 1">1</span>
  <span style="order: dasdkaj">Order Inválido</span>
  <span style="order: 5">5</span>
</div>

Note que utilizei o map ao final do exemplo anterior só para imprimir somente os textos de cada elemento no console. Mas isso mostra que a lista foi corretamente ordenada.

Observe que também me preocupei em lidar com os possíveis casos em que o elemento não tiver uma propriedade order válida. Nesse caso, retornar-se-ia uma string qualquer ou uma string vazia. Como o JavaScript as interpreta como NaN mediante parseInt, verifico se são NaN e as ordeno dentro da função de comparação. Nesse caso, as ordeno para o fim da lista.

E a expressão [...letterDivs].sort((a, b) => /* ... */) retorna um novo array. Como utilizamos o spread operator dentro de um novo array literal, o NodeList letterDivs original não será modificado, já que só foi utilizado para fazer uma cópia para um novo array. Desse modo, precisamos atribuir o resultado da expressão em questão para uma nova variável. Nesse caso, criei uma nova variável chamada sorted.

E por fim sua função de comparação também não estava retornando nenhum valor. Utilizei o return para isso. Saiba mais.

3
  • Resultou! Mas eu não percebi como é que a diferença entre aNum e bNum ordena as orders por odem ascendente. 15/01/2021 às 15:30
  • 1
    @InêsBarataFeioBorges, a função do sort recebe dois parâmetros (a e b). Se retornar um número menor que 1, coloca a em índice anterior a b. Se retornar 0, não muda. E se retornar número maior que 1, coloca a em índice posterior a b. Desse modo, a diferença faz exatamente isso (assumindo que sejam números). Quando subtraímos b de a (a - b), dizemos que, se b for maior que a, teremos um resultado negativo, de modo que a irá para antes de b. Por outro lado, se b for menor que a, resulta-se em número positivo, no qual a será deslocado para depois de b. 15/01/2021 às 15:33
  • 1
    Funciona se quiser ordenar de modo decrescente também, mas aí tem que se fazer b - a. :) 15/01/2021 às 15:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .