If you faced into a problem of sorting your lists into alphabetical order dynamically, i created a solution for you using my favorite library, jQuery.

I created this script unintentionally which i think might help to others that also  faced the same problem with me.

This script is dependent with jQuery so you need to include jQuery for this script to work.

The Sample HTML

Let’s use the sample list below and try to re-order that using our script.

<ul class="cars">
	<li>Toyota</li>
	<li>Acura</li>
	<li>Audi</li>
	<li>Honda</li>
	<li>Ford</li>
	<li>Hyundai</li>
	<li>Mazda</li>
	<li>Nissan</li>
	<li>Volkswagen</li>
	<li>BMW</li>
</ul>

The jQuery Script

The script below will sort unordered list into alphabetical order. Just copy the script and paste it into your page template (inside the <script> tag or into your JavaScript template) where the sort is needed.

jQuery(function($) {
	var elem = $('.cars'); //replace this with your list selector

	sortList(elem);

	function sortList($elem) {
		var $li = $elem.find('li'),
			$listLi = $($li,$elem).get();
		$listLi.sort(function(a, b){
			var keyA = $(a).text().toUpperCase();
			var keyB = $(b).text().toUpperCase();

			return (keyA < keyB) ? -1 : 1;
			//uncomment below and comment above if you want descending order
			//return (keyA > keyB) ? -1 : 1;
		});
		$.each($listLi, function(index, row){
			$elem.append(row);
		});
	}
});

To use the script with your existing list, just change the selector value $('.cars') of the elem variable with your existing <ul> list class or id. Modify the script to suite your needs.

Open the demo below to see our script in action.