如何对网站列表进行排序（即 id / sub-class 标识不佳）？

Question

我正在尝试制作一个 Greasemonkey 脚本，该脚本将重做页面右侧的列表，以便它们从 A 到 Z 列出，无论它们开始时的布局如何。

站点是 http://ustvgo.tv/，相关的 HTML 是：

<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>

<a> 个节点没有 ID 或子类。

我已经得到它来提取 link 的文本部分并将其添加到空白所在的拆分数组中，但我终其一生都无法将其吐出那个带有编号的数组，这样我就可以在 link 文本前面添加一个新 ID，并且 link 文本仍然和原来一样。

即<a href="http://ustvgo.tv/fox-sports-1/">Fox Sports 1</a> 会变成 <a href="http://ustvgo.tv/fox-sports-1/">ID="name" Fox Sports 1</a> 这样我就可以让脚本按名称 ID 文本 A - Z 对列表进行排序。

如何对该列表进行排序？

Answer 1

对一组节点进行排序：

首先确定控制显示顺序的HTML。 ^{（请注意，如果通过 CSS 更改视觉顺序，它可能会变得复杂。为此提出一个新问题。）}
在本例中，它是 <li> 个元素。
使用 techniques like these 为这些节点及其容器识别 CSS/jQuery 选择器。
在这种情况下，容器的选择器是：#recent-posts-3 > ul 和
项目的选择器是：#recent-posts-3 > ul > li（或容器上的 .find ("li")）。
根据需要对节点进行排序（通常在 textContent 上）。
参考 the .localeCompare() doc.
按排序顺序将节点重新附加到容器。请注意，当您在现有节点上使用 .appendChild()、.appendTo() 等时，它会 将该节点 移动到新位置。
请注意，此问答针对静态页面。动态/javascript-加载/AJAX-驱动的页面可能需要不同的方法。为此打开一个新问题。

因此，这是一个完整的工作 Tampermonkey/Violentmonkey 脚本，用于对该列进行排序。（它可能也适用于 Greasemonkey 4+，但是 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'} );
}

如何对网站列表进行排序（即 id / sub-class 标识不佳）？

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

sorting

jquery

greasemonkey

userscripts

tampermonkey