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.
(a.style.order > b.style.order) ? 1 : -1;
=>return (a.style.order > b.style.order) ? 1 : -1;
?O(n log n)
), então verifique se não há como fazer esse tipo de coisa fora dosetInterval
. :)