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

除了传递给querySelector的CSS选择器关闭之外，该代码可以工作（排序）。对于您提供的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。

如何使用Greasemonkey重新组织<ul>列表？</ul>

1 个答案: