用javascript对链接进行排序？答案

【问题标题】：Sort links with javascript?用javascript对链接进行排序？
【发布时间】：2013-08-13 16:48:39
【问题描述】：

我想按字母顺序对带有链接的列表进行排序，这是我的代码：

!DOCTYPE html>
<html>
<head>
    <title>Sort list items alphabetically with Javascript</title>
    <script type="text/javascript">

    function sortUnorderedList(ul, sortDescending) {
      if(typeof ul == "string")
        ul = document.getElementById(ul);

      var lis = ul.getElementsByTagName("LI");
      var vals = [];

      for(var i = 0, l = lis.length; i < l; i++)
        vals.push(lis[i].innerHTML);

      vals.sort();

      if(sortDescending)
        vals.reverse();

      for(var i = 0, l = lis.length; i < l; i++)
        lis[i].innerHTML = vals[i];
    }

    window.onload = function() {
      var desc = false;
      document.getElementById("test").onclick = function() {
        sortUnorderedList("list", desc);
        desc = !desc;
        return false;
      }
    }

    </script>
</head>
<body>
    <div id="test"> <a href="#">Sort List</a></div>
    <ul id="list">
        <li>Peter</li>
        <li>Mary</li>
        <li>Paul</li>
        <li>Allen</li>
        <li>James</li>
        <li>Vicki</li>
        <li>Brock</li>
        <li>Dana</li>
        <li>Frank</li>
        <li>Gil</li>
        <li>Helen</li>
    </ul>
</body>

但是当我想添加指向名称的链接时，列表变得一团糟（不再按字母顺序排列），那么我应该改变什么？我完全不了解javascript，有人可以在这里帮助我吗，谢谢

<div id="test"> <a href="#">Sort List</a></div>
    <ul id="list">
        <li><a href="tumblr.com/post/57781372261">Peter</a></li>
        <li><a href="tumblr.com/post/57783141055">Mary</a></li>
        <li><a href="tumblr.com/post/57781372261">Paul</a></li>
     </ul>

添加链接后，帖子将按那里的数字排序，而不是按名称..

【问题讨论】：

ul 代表“未排序列表”
为您修复了标题/标签。 Java is not JavaScript（向下滚动查看更严肃的答案）
@DannyMo 好的，谢谢：P
您能发布添加了链接的版本吗？如果您不发布出现问题的版本，就很难判断出了什么问题。
@Barmar 我已经编辑过了 :)

标签： javascript list sorting

【解决方案1】：

您按<li> 和</li> 之间的任何内容进行排序，其中包括网址，而不仅仅是名称。因此，如果 URL 的排序方式与名称不同，结果将是无序的。在您的情况下，您是按 URL 中的 ID 号排序的。

解决这个问题的一个简单方法是将名称放在锚元素中，例如

    <li><a data-name="Peter" href="tumblr.com/post/57781372261">Peter</a></li>
    <li><a data-name="Mary" href="tumblr.com/post/57783141055">Mary</a></li>
    <li><a data-name="Paul" href="tumblr.com/post/57781372261">Paul</a></li>

将data-name 属性放在href 属性之前应该使其优先。

实际上，我不完全确定这会奏效。 innerHTML 属性包含浏览器解析后的 HTML，它可能会重新排序属性。要真正解决这个问题，您需要向sort() 提供一个比较函数来查找名称并进行比较，而不是直接比较 HTML。

这是一个仅比较文本的版本。它与 DOM 节点本身一起工作，而不是与 HTML 相互转换。

function compareText(a1, a2) {
    var t1 = a1.innerText, t2 = a2.innerText;
    return t1 > t2 ? 1 : (t1 < t2 ? -1 : 0);
}

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string") {
    ul = document.getElementById(ul);
  }

  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  for(var i = 0, l = lis.length; i < l; i++) {
    vals.push(lis[i]);
  }

  vals.sort(compareText);

  if(sortDescending) {
    vals.reverse();
  }

  ul.innerHTML = '';
  for(var i = 0, l = vals.length; i < l; i++) {
    ul.appendChild(vals[i]);
  }
}

DEMO

【讨论】：

它不起作用 :(( ，我已经将数据名称添加到我的链接中，但是在我保存它之后，tumblr 将那些 '数据名称' 放在 'href="URL" 之后。 . 那么现在呢？
Tumblr 没有这样做，浏览器做到了，就像我说的那样。
我添加了一个新版本的sortUnorderedList 来解决这个问题。