Question

我特意想要对此节点列表进行排序：

var liList = document.getElementsById("theOl").querySelectorAll(".theOl > li");

由特定的孩子排序：

liList[someIndex].querySelectorAll('a[href]')[0]

基本上，通过querySelectorAll（'a [src]'）返回的a的src按字母顺序对整个节点列表进行排序。数组中的每个项都将具有此元素。它将始终返回1个元素。

Answer 1

假设您有一个数组数组，并且您希望对第一个项目进行排序，请执行此操作。

var arr = [[7,2],[3,4],[8,5],[4,5],[2,4],[1,2]],
    res = arr.sort((p,c) => p[0]<=c[0] ? -1:1);

在您的情况下，如果它是您要排序的href元素的a属性，则可能需要执行以下操作。或者，如果您要对内部文字进行排序，则可以将href替换为innerText或firstChild.nodeValue。

Array.prototype.sort.call(liList, (p,c) => p.querySelector('a').href <= c.querySelector('a').href ? -1 : 1);

Answer 2

Array.prototype.sort.call(liList[someIndex].querySelectorAll('a[href]'), function (a, b) {
        if (a > b) {
            return 1;
        }
        if (a < b) {
            return -1;
        }
        return 0;
    });

上面的代码应该根据li标签内锚点的href元素对元素进行排序。但是，您必须注意，除非您根据排序编写要替换的代码，否则它不会按照您预期的顺序替换元素。

Answer 3

这可能不是最有效的，但我开始工作了。

使用<a>

querySelectorAll()

将NodeList转换为Array.prototype.map.call()
map数组的函数可以得到href。
接下来填充一个新的href数组。
最后按sort()

段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>36614594</title>
</head>

<body>
  <ol>
    <li><a href="http://google.com/">Google</a>
    </li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/">MDN</a>
    </li>
    <li><a href="http://yahoo.com/">Yahoo</a>
    </li>
    <li><a href="http://msn.com/">MSN</a>
    </li>
    <li><a href="http://att.net/">AT&amp;T</a>
    </li>
    <li><a href="http://stackoverflow.com/">StackOverflow</a>
    </li>
  </ol>
  <script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
  <script>
    var linkArray = [];
    var anchorList = document.querySelectorAll('a');
    var anchorArray = Array.prototype.map.call(anchorList, function(obj) {
      var xHref = obj.href;
      return linkSort(linkArray, xHref);
    });

    function linkSort(list, obj) {

      list.unshift(obj);
      list.sort();
      return list;
    }
    console.log(linkArray);
  </script>
</body>

</html>

按特定子项排序DOM元素（无JQuery）

3 个答案:

段