Sort links with javascript?

Question

I'd like to sort a list with links alphabetical this is my code:

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

But when i want to add links to the names, the list gets all messed up (not alphabetical anymore), so what should i change? I have absolutely no knowledge about javascript, could someone help me out here, thank you

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

when the links are added, the posts will be sorted by the numbers there, and not by the names..

Fixed the title/tags for you. Java is not JavaScript (scroll down for the more serious answers) — DannyMo
– DannyMo, Commented Aug 13, 2013 at 16:53
Could you post the version with the links added? It's hard to tell what's wrong when you don't post the version that exhibits the problem. — Barmar
– Barmar, Commented Aug 13, 2013 at 16:58

Barmar · Accepted Answer · 2013-08-13 19:01:46Z

3

You're sorting by whatever is between <li> and </li>, which includes the URLs, not just the names. So if the URLs don't sort similarly to the names, the results will be out of order. In your case, you're sorting by the ID numbers in the URLs.

A simple way to solve this is to put the names in the anchor elements, e.g.

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

Putting the data-name attribute before the href attribute should make it take precedence.

Actually, I'm not totally sure this will work. The innerHTML property contains the HTML after it's been parsed by the browser, and it's possible it reorders attributes. To really solve this, you need to provide a comparison function to sort() that finds the names and compares them, rather than comparing the HTML directly.

Here's a version that compares the text only. It works with the DOM nodes themselves, rather than converting to and from 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

edited Aug 13, 2013 at 19:01

answered Aug 13, 2013 at 17:02

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M''' Over a year ago

it's not working :(( , i've added the data-names to my links, but after i save it, tumblr put those 'data-names' after the 'href="URL" .. so what now?

Barmar Over a year ago

Tumblr didn't do it, the browser did, like I said it might.

Barmar Over a year ago

I've added a new version of sortUnorderedList that solves the problem.

Collectives™ on Stack Overflow

Sort links with javascript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related