Quiero ordenar una matriz de elementos HTML. Quiero ordenarlos por el valor de propiedad izquierdo de css. Eso significa que el elemento con el valor más bajo a la izquierda es el primer elemento de la matriz que quiero ordenar y el elemento con el valor más alto a la izquierda es el último elemento de la matriz que quiero ordenar.
Si alguien me da una respuesta, por favor no me responda con jquery, porque no sé nada en jquery.
const games = document.querySelectorAll('.games'); games.sort((a, b) => { return parseInt(window.getComputedStyle(a).getPropertyValue('left')) - parseInt(window.getComputedStyle(b).getPropertyValue('left')) }) .games { position: absolute; transform: scale(1); transition: left 0.4s ease; width: 20vw; height: 20vw; border-radius: 2.5vw; background-color: white; display: flex; justify-content: center; } .games:nth-of-type(1) { left: 6.5vw; } .games:nth-of-type(2) { left: 40; } .games:nth-of-type(3) { left: calc(100vw - 6.5vw - 20vw); /* same position if you write: right: 6.5vw*/ } <div class="games"></div> <div class="games"></div> <div class="games"></div>Le faltaban corchetes y necesita una extensión para convertirlo en una matriz ordenable.
Los navegadores modernos (a excepción de EDGE anterior) pueden hacer un forEach en una lista de nodos querySelectorAll, pero para mapear, filtrar y ordenar, debe convertir a matriz.
Aquí hay una versión más concisa. Tenga en cuenta que uso parseFloat para deshacerme de las unidades
const games = [...document.querySelectorAll('.games')]; // has to be an array to sort it const getProp = (elem,prop) => window.getComputedStyle(elem).getPropertyValue(prop); console.log(games) games.sort((a, b) => parseFloat(getProp(a,'left')) - parseFloat(getProp(b,'left'))); // debug games.forEach(game => game.textContent += ': ' + getProp(game,'left')) console.log(games) .games { position: absolute; transform: scale(1); transition: left 0.4s ease; width: 20vw; height: 20vw; border-radius: 2.5vw; background-color: white; display: flex; justify-content: center; } .games:nth-of-type(1) { left: 6.5vw; } .games:nth-of-type(2) { left: 40; } .games:nth-of-type(3) { left: calc(100vw - 6.5vw - 20vw); /* same position if you write: right: 6.5vw*/ } <div class="games">1</div> <div class="games">2</div> <div class="games">3</div>