Sorting an ordered list with jQuery
Html, Javascript, Programming February 8th, 2010I had the following problem lately.
I had a rather long ordered list.
But everytime I wanted to add an item I had to manually check were to put it.
Well then I asked a colleague of mine if there wasn’t a way to do this with javascript and he came up with the following solution:
<html>
<head>
<title>sort ol</title>
</head>
<body>
<ol id="tobesorted">
<li>c</li>
<li>b</li>
<li>a</li>
<li>A</li>
<li>C</li>
<li>A</li>
<li>B</li>
<li>a</li>
<li>A</li>
<li>a</li>
<li>banaan</li>
<li>aardbei</li>
<li>sinaasappel</li>
<li>citroen</li>
<li>appel</li>
<li>peer</li>
</ol>
<script src="jquery-1.4.min.js"></script>
<script>
jQuery.fn.sort = function() {
return this.pushStack(Array.prototype.sort.apply(this, arguments), []);
};
function sortAlpha(a, b) {
var atext = a.innerHTML;
var btext = b.innerHTML;
var alower = atext.toLowerCase();
var blower = btext.toLowerCase();
return alower > blower ? 1 : (
alower < blower ? -1 : (
atext > btext ? 1 : (
atext < btext ? -1 : 0
)
)
);
};
$(document).ready(function() {
$('#tobesorted li').sort(sortAlpha).appendTo('#tobesorted');
});
</script>
</html>
This way a list looking like this:
- banaan
- aardbei
- sinaasappel
- citroen
- appel
- peer
now looks like this:
- aardbei
- appel
- banaan
- citroen
- peer
- sinaasappel
Sorry for the dutch words but hey, it’s just an alphabet.
This solution also works for an un-ordered list.
Special thanks to Crydust
I hope others will find this post helpfull.
Cheers,
Mayiko
June 20th, 2010 at 8:50 am
Sorry to be a pain, but what does the file jquery-1.4.min.js contain?
Thanks
June 20th, 2010 at 9:35 am
Hi,
The jquery-1.4.min.js is a standard javascript file.
You can download it here: http://jquery.com/
You can compare it to the ajax toolkit scriptfile but then for jquery.
cheers
June 20th, 2010 at 10:39 am
Thanks for your quick response, I found the file. Can your code be used to order nested ol’s or ul’s ? Is it just a case of repeating your script for each level? Not having much success here
(
June 20th, 2010 at 12:06 pm
Hi again
I have tried your example file using jquery-1.4.2.js, but it’s not working, and IE throws the following errors:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; Tablet PC 2.0; MALC)
Timestamp: Sun, 20 Jun 2010 11:59:13 UTC
Message: Invalid character
Line: 1
Char: 1
Code: 0
URI: file:///C:/Users/terry/Desktop/Menu/”jquery-1.4.2.js”
Message: Invalid character
Line: 23
Char: 11
Code: 0
URI: file:///C:/Users/terry/Desktop/Menu/test.html
June 20th, 2010 at 12:42 pm
Apologies, the 2nd error above was after I had moved your script code into the section of the page. When I run the page exactly as you show it above, the error is as follows:
Message: Invalid character
Line: 43
Char: 11
Code: 0
URI: file:///C:/Users/terry/Desktop/Menu/test.html
June 20th, 2010 at 2:16 pm
Ok – seems IE doesn’t like the quotation marks when copied/pasted – now fixed and your code is working fine. Still trying to apply it to a nested ul without success. Any advice would be appreciated.
Thanks
June 20th, 2010 at 4:27 pm
Hi Terry,
I’m glad that the code works.
I’ll look into it tomorrow. If I find the solution I’ll post it here.
Cheers!!