Jquery. Order a list of names alphabetically

Question

I got a list of names (firstname and lastname) on a page. I want the user to be able to sort this list on either firstname or lastname using jQuery (or normal javascript). How can this be done?

<ul>
<li>Michael Scott</li>
<li>Jonathan Torry</li>
</ul>

Very thankful for all input!

score 4 · Accepted Answer · answered Feb 28 '11 at 09:56

4

Array.sort() is what you need

var items = [];
$('ul li').each(function(){
   items.push($(this).html());
})
items.sort();

Example here : http://jsfiddle.net/jomanlk/7UzNZ/

answered Feb 28 '11 at 09:56

JohnP

48,581
13
106
137

Looking interesting. How can I change order of the names? Ascending and descending? – Jonathan Clark Feb 28 '11 at 10:01
You could simply call `items.reverse();` on the array to reverse it – JohnP Feb 28 '11 at 10:06
items.reverse(); instead of items.sort(); did not change the order. – Jonathan Clark Feb 28 '11 at 10:21
1

No, I meant you have to call `items.reverse()` after you call `items.sort()`. Sort will sort it initially, and reverse will simply give you the reversed order. Did that help? – JohnP Feb 28 '11 at 10:26

score -1 · Answer 2 · edited Oct 31 '12 at 17:46

Try my plugin http://www.athos99.com/listorder/type.html

For ordering fistname and lastname, change your list like this :

<ul id="ul1">
<li><span>Michael</span> <span>Scott</span></li>
<li><span>Jonathan</span> <span>Torry</span></li>
</ul>

For ordering by firstname

 $('#ul1').listorder( { child:'li', childValue:function(){return $(this.children([0]).text();} });

For ordering by lastname

 $('#ul1').listorder( { child:'li', childValue:function(){return $(this.children([1]).text();} });


$(this.children([0])   select the 1st span
$(this.children([1])   select the 2nd span

Jquery. Order a list of names alphabetically

2 Answers2