Order Ul List By Span Content

I am really lost with trying to order an ul list by the span in the li. I have this next structure I have that list generated from some uploaded videos and separated because respn

Solution 1:

it works!...

var list = $("ul#videosList");
var desc= false;
list.append(list.children().get().sort(function(a, b) {
    var aProp = $(a).find("span").text(),
        bProp = $(b).find("span").text();
    return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1);
}));

Solution 2:

If you're using jQuery, refer this extension which helps you sorting DOM elements with a custom comparer function. It works like this:

$('#videosList').sortElements(function(a, b){
  return $(a).text() > $(b).text() ? 1 : -1;
});

Then, the list items are sorted alphabetically by their captions.