How to sort a website list (That has poor id / sub-class identification)?

Question

I'm trying to make a Greasemonkey script that will redo the listing on the right hand side of the page so they list from A - Z no matter how they may be laid out to begin with.

The site is http://ustvgo.tv/ and the relevant HTML is:

<div id="recent-posts-3" class="mh-widget widget_recent_entries">
    <h4 class="mh-widget-title"><span class="mh-widget-title-inner">Recent Posts</span></h4>
    <ul>
        <li><a href="http://ustvgo.tv/fox-sports-1/">Fox Sports 1</a></li>
        <li><a href="http://ustvgo.tv/disneyxd/">DisneyXD</a></li>
        <!-- etc. -->
    </ul>
</div>

The <a> nodes have no ID's or subclasses.

I've got it to pull the text part of the link and to add it to a split array where the white spaces are but I for the life of me can't get it to spit out that array with the numbering so that I can add a new ID in front of the link text and still have the link text be the same as it was.

I.E. <a href="http://ustvgo.tv/fox-sports-1/">Fox Sports 1</a> would become <a href="http://ustvgo.tv/fox-sports-1/">ID="name" Fox Sports 1</a> that way I can have the script just sort the list by the name ID text A - Z.

How can I sort that list?

Answer 1

To sort a group of nodes:

1. First identify the HTML that controls the display order. ^{(Note that if the visual order is changed via CSS, it can get complicated. Ask a new question for that.)}
   In this case, it is the <li> elements.
2. Using techniques like these identify CSS/jQuery selectors for those nodes and their container.
   In this case a selector for the container is: #recent-posts-3 > ul and
   a selector for the items is: #recent-posts-3 > ul > li (or .find ("li") on the container).

3. Sort the nodes as desired (typically on textContent).
   Reference the .localeCompare() doc.

4. Reappend the nodes to the container in the sorted order. Note that when you use .appendChild(), .appendTo(), etc. on an existing node, it moves that node to the new location.

5. Note that this Q&A is for static pages. Dynamic / javascript-loaded / AJAX-driven pages may require a different approach. Open a new question for that.

So, here is a complete working Tampermonkey/Violentmonkey script that sorts that column. (It probably works in Greasemonkey 4+ too, but you should not use that engine anyway):

// ==UserScript==
// @name     USTVGO, sort "Recent Posts"
// @match    *://ustvgo.tv/*
// @noframes
// @grant    none
// ==/UserScript==
/* global jQuery, $ */
/* eslint-disable no-multi-spaces, curly */
'use strict';

var $ = jQuery;  //  The page loads jQuery (and we are in grant none mode), but doesn't set `$`.
var recentPostsLst  = $("#recent-posts-3 > ul");
var itemsToSort     = recentPostsLst.find ("li");

itemsToSort.sort (sortByLinkTextAscending).appendTo (recentPostsLst);

function sortByLinkTextAscending (nodeA, nodeB) {
     var valA_Text  = $(nodeA).find ("a").text ().trim ();
     var valB_Text  = $(nodeB).find ("a").text ().trim ();

     return valA_Text.localeCompare (valB_Text, 'en', {sensitivity: 'base'} );
}