javascript - 如何使用 Greasemonkey 重新组织 列表？

Question

我尝试从 Stack Overflow 帖子中改编某人的脚本，但我做错了一些事情。我基本上没有 javascript 或 jQuery 的经验，所以...请帮忙？

<小时/>

目标页面 HTML 如下所示:

<div class="container7">
    <div class="userdata">
        <h4></h4>
        <ul id="userinfo" class="set textsize">
            <li class="name"></li>
            <li class="joindate"></li>
            <li class="title"></li>
            <li class="custom"></li>
            <li class="description"></li>
        </ul>
    </div>
</div>

我想将其修改为如下所示:

<div class="container7">
    <div class="userdata">
        <h4></h4>
        <ul id="userinfo" class="set textsize">
            <li class="joindate"></li>
            <li class="name"></li>
            <li class="custom"></li>
            <li class="description"></li>
            <li class="title"></li>
        </ul>
    </div>
</div>

我试过这个:

// ==UserScript==
// @name        Reorganize li
// @namespace   blah
// @description Reorganize li
// @include     https://www.thewebsite.com/*
// @version     1
// @grant       none
// ==/UserScript==

var container    = document.querySelector (".userdata");
var firstTargDiv = container.querySelector (".userdata > li.name:first-child");
var lastTargDiv  = container.querySelector (".userdata > li.joindate:last-child");

//-- Swap last to first.
container.insertBefore (lastTargDiv, firstTargDiv);

//-- Move old first to last.
container.appendChild (firstTargDiv);

作为开始——只需翻转前两个即可。它不起作用。我不确定我做错了什么。我尝试过测试不同的 querySelector 值，但似乎没有任何效果。

Answer 1

除了 CSS 选择器传递到 querySelector 之外，该代码可以(在某种程度上)工作。 ， 下线。对于您提供的 HTML，它们应该是:

var container    = document .querySelector ("div.userdata > ul");
var firstTargDiv = container.querySelector ("li.name");
var lastTargDiv  = container.querySelector ("li.joindate");

此外，<li> s 不会完全达到您想要的结果。

<小时/>

要对统一的节点集合进行排序，只需按照您想要的顺序将它们附加到容器中即可。追加现有节点只会移动节点。

如果您的节点列表(本例中为 <li> )每个都有唯一标识符或包含的文本，请使用数组来定义任意排序顺序。
在这种情况下，每个 <li>有一个独特的 CSS 类，因此我们将像这样定义排序顺序:

var classOrder = ["joindate", "name", "custom", "description", "title"];

然后我们可以使用这个数组来捕获每个 <li>按类并按所需顺序附加它。

使用 jQuery，您的完整用户脚本将变为:

// ==UserScript==
// @name     Reorganize li
// @include  https://www.thewebsite.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant GM_addStyle directive is needed to work around a design 
    change introduced in GM 1.0.   It restores the sandbox.
*/
var classOrder  = ["joindate", "name", "custom", "description", "title"];
var containerNd = $("div.userdata > ul");

for (var J = 0, L = classOrder.length;  J < L;  J++) {
    var targetNode  = containerNd.find ('li.' + classOrder[J]);
    containerNd.append (targetNode);
}

您可以see the code in action at jsFiddle .