CODEWITHSUNDEEP
javascripthtmlcssarrays
Jojos bizzare JS
Jojos bizzare JS

Reputation: 119

How to sort an array of HTML elements with JS

I want to sort an array of HTML elements. I want to sort them by the css left property value. That means that the element with the lowest left value is the first element of the array that I want to sort and the element with the highest left value is the last element of the array that I want to sort.

If somebody gives me an answer, please don't give me an answer with jquery, because I don't know anything in 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>

Upvotes: 3

Views: 850

Answers (1)

mplungjan
mplungjan

Reputation: 178011

You were missing brackets and you need a spread to make it a sortable array.

Modern browsers (early EDGE excepted) can do a forEach on a querySelectorAll nodeList, but to map, filter and sort, you need to convert to array.

Here is a more concise version. Note I use parseFloat to get rid of the units

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>

Upvotes: 2

Related Questions