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");