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

名前だけでなく、URL を含む<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が優先されます。

実際、これが機能するかどうかは完全にはわかりません。プロパティには、ブラウザーによって解析された後のinnerHTMLHTML が含まれており、属性を並べ替えることができます。sort()これを本当に解決するには、HTML を直接比較するのではなく、名前を見つけて比較する比較関数を に提供する必要があります。

テキストのみを比較したバージョンを次に示します。HTML との間で変換するのではなく、DOM ノード自体で動作します。

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 に答える