https://ru.stackoverflow.com/questions/977423

by Alexey Demin

HTML

<div id="origin">
  <span>Original</span>
  <div class="parent">
    <span class="time">20:40</span>
  </div>
  <div class="parent">
    <span class="time">10:40</span>
  </div>
  <div class="parent">
    <span class="time">23:25</span>
  </div>
</div>
<div id="result">
  <span>Sorted</span>
</div>

CSS

* {
  font-family: monospace;
}

#origin, #result {
  border: 1px dashed grey;
  margin: 2px;
  padding: 2px;
}

#origin {
  color: green;
}

#result {
  color: red;
}

JavaScript

var parseTime = function (val, idx, arr) {
	var parsed = parseInt(val, 10);
	return isNaN(parsed) ? 0 : parsed;
},
getTimeArray = function (elem) {
	return $(elem).text().split(":").map(parseTime);
},
sortParents = function (a, b) {
	var a1 = getTimeArray(a);
	var a2 = getTimeArray(b);
	var d1 = new Date(0, 0, 0, a1[0], a1[1]);
	var d2 = new Date(0, 0, 0, a1[0], a2[1]);
	if (a1[0] === a2[0] && a1[1] === a2[1]) {
		return 0;
	} else if (d1 < d2) {
		return -1;
	} else if (d1 > d2) {
		return 1;
	}
};

var $elems = $("div.parent");
    $elems.sort(sortParents);
for (var i = 0; i < $elems.length; i++) {
	var $clone = $($elems[i]).clone();
	$("#result").append($clone);
}