JSFiddle - React, Tailwind, and code Playground

by Mrt Ja

HTML

<div id="sortme">
  
	  <div class="myclass">
		<span>2</span>
	  </div>
	  
	  <div class="myclass">
		<span>3</span>
	  </div>
	  
	  <div class="myclass">
		<span>4</span>
	  </div>
	  
	  <div class="myclass">
		<span>1</span>
	  </div>
	  
  </div>

CSS

.hide {display: none;}

JavaScript

var list = document.getElementById('sortme');

var nodesToSort  = list.querySelectorAll('.myclass');
Array.prototype.map.call(nodesToSort, function(node) {
  return {
    node: node,
    relevantText: node.querySelector('span').textContent
  };
}).sort(function(a, b) {
  console.log(a, b);
  return a.relevantText.localeCompare(b.relevantText);
}).forEach(function(item) {
  list.appendChild(item.node);
});