如何对锚标记内的无序列表进行排序

Question

I have the following DOM structure (unordered list), that I would like to sort on the a href tag name using jQuery.

Structure is as follows:

<div id="refmenu">
<ul id="list">
<li><a href="....">Google</a></li>
<li><a href="....">Apple</a></li>
<li><a href="....">IBM</a></li>
<li><a href="....">Yahoo!</a></li>
<li><a href="....">Hotmail</a></li>
</ul>
</div>

Based on the above, would like to be able to run this through a jQuery function that will sort the unordered list names alphabetically, obviously also keeping the a href link together with the anchor tag names.

Answer 1

Give TinySort plugin a look at, it sorts child nodes by contents or attributes: Example

Edit-

$("div#refmenu>ul#platsys>li").tsort("a.title"); 

Also there is no reason for the extra filtering before the id selector , selecting by tag name does not speed up the performance when selecting by id. Also your id name for your ul is not platsys, so I don't know where you got that from it should be ul#list>li , but to shorten all that extra unneeded code I would have

$("#refmenu>#list>li").tsort("a.title");

actually from your html I think that would be the same as:

$("#list>li").tsort("a.title");

Answer 2

you can try List.js which will extend your list features to extremes as

1. it's lightweight [only 3K script]
2. easy to implement in your existing HTML table using class
3. searchable, sortable and filterable

HTML

<div id="my-list">
    <ul class="list">
       <li>
           <h3 class="name">Luke</h3>
       </li>
       <li>
           <h3 class="name">John</h3>
       </li>
    </ul>
</div>

Javascript

var options = {
    valueNames: ['name']
};
var myList = new List('my-list', options);

Answer 3

Try this:

var list = $("#list"),
    listItems = Array.prototype.slice.call(list.find("li"));
listItems.sort(function(a, b) {
    a = $("a", a).text(), b = $("a", b).text();
    return a < b ? -1 : a > b ? 1 : 0;
});
listItems.forEach(function(val) {
    list.append($(val).remove());
});

If you want to sort on a different criteria than the anchor text, replace text() by whatever you want.

Answer 4

Surely all your href's here are going to start with http:// or www? How will sorting that help?

Would an ordered list not do the job?