How to sort elements in a list with numbers?

Question

I am trying to sort this list:

<div id="mainMenu">
    <span>Thing 5</span>
    <span>Thing 4</span>
    <span>Thing 7</span>
    <span>Thing 1</span>
    <span>Thing 5</span>
    <span>Thing 6</span>
    <span>Thing 3</span>
</div>

I have tried:

$('#mainMenu').sort(function(){
    $(this).children().sort();
});

I want it sorted in this order:

<span>Thing 1</span>
<span>Thing 2</span>
<span>Thing 3</span>
<span>Thing 4</span>
<span>Thing 5</span>
<span>Thing 6</span>
<span>Thing 7</span>

you are not sorting the elements, you are modifying its content — Arun P Johny, Mar 10 '14 at 04:57
@GajusKuizinas but this isn't a ul/ol. I need the last character sorted not the whole wrod — user3400321, Mar 10 '14 at 04:59
@user3400321: Why would it matter what the element type is??? — cookie monster, Mar 10 '14 at 05:02

score 1 · Accepted Answer · answered Mar 10 '14 at 05:00

1

Try this,

$span = $('#mainMenu span').sort(function(a, b) {
    if ($(a).text() < $(b).text()) return -1;
    if ($(a).text() > $(b).text()) return 1;
    return 0;
});
$('#mainMenu').html($span);

Demo

answered Mar 10 '14 at 05:00

Rohan Kumar

40,431
11
76
106

score 1 · Answer 2 · answered Mar 10 '14 at 05:05

1

Try this code work perfectly:

var mylist = $('#mainMenu');
var listitems = mylist.children('span').get();

listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
});
$.each(listitems, function(index, item) {
   mylist.append(item); 
});

answered Mar 10 '14 at 05:05

Mr.G

3,413
2
16
20

thanks in my case this works. I cant vote on this – user3400321 Mar 10 '14 at 05:14

How to sort elements in a list with numbers?

2 Answers2