0

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

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

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

4

1 回答 1

3

您正在按<li>和之间的任何内容进行排序</li>，其中包括 URL，而不仅仅是名称。因此，如果 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属性包含浏览器解析后的 H​​TML，它可能会重新排序属性。要真正解决这个问题，您需要提供一个比较函数来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]);
  }
}

演示

于 2013-08-13T17:02:38.227 回答