sort html elements

by willystyle

HTML

<div class="box green">1</div>
<div class="box red">2</div>
<div class="box purple">3</div>

CSS

.box {
  width: 100%;
  height: 100px;  
  color: #fff;
  border: 1px solid #fff;
  padding: 10px;
}

.green {
  background: green;
}

.red {
  background: red;
}

.purple {
  background: rebeccapurple;
}

JavaScript

const args = ['Red', 'Purple', 'Green'].map(arg => arg.toLowerCase());

let divs = document.querySelectorAll('div.box');

let sortedDivs = Array.from(divs).sort((a, b) => {
	aClass = Array.from(a.classList).filter(clas => args.indexOf(clas) > -1)[0];
  bClass = Array.from(b.classList).filter(clas => args.indexOf(clas) > -1)[0];
  return args.indexOf(aClass) - args.indexOf(bClass);
});

sortedDivs.forEach(div => {
	document.body.appendChild(div);
});