JQuery incorrectly sorts <li> by id

Question

I have this <li> for sorting by id:

 <ul id="members-list"> <li id="member_8"> <li id="member_4"> <li id="member_7"> <li id="member_12"> <li id="member_11"> <li id="member_13"> <li id="member_5"> <li id="member_6"> <li id="member_9"> <li id="member_3"> <li id="member_2"> <li id="member_1"> <li id="member_10"> </ul> 

The code I'm using is:

 <script> $( document ).ready(function() { $("li[id*='member_']").sort(function (a, b) { return parseInt(a.id.replace('member_', '')) > parseInt(b.id.replace('member_', '')); }).each(function () { var elem = $(this); elem.remove(); $(elem).appendTo("ul#members-list"); }); }); </script> 

Result:

 <ul id="members-list"> <li id="member_5"> <li id="member_8"> <li id="member_7"> <li id="member_1"> <li id="member_2"> <li id="member_3"> <li id="member_4"> <li id="member_6"> <li id="member_9"> <li id="member_10"> <li id="member_11"> <li id="member_12"> <li id="member_13"> </ul> 

<li> not sorted correctly, what might cause the problem?

Answer 1

The problem is that you did not implement the sort function correctly. The function must return a positive number, a negative number, or zero; you return true / false.

So, when a.id is less than / equal to b.id, the function returns false, which is zero; which is considered as a.id, is equal to b.id; this disables the sort function.

The solution is to change this:

 return parseInt(a.id.replace('member_', '')) > parseInt(b.id.replace('member_', '')); 

For this:

 return parseInt(a.id.replace('member_', '')) - parseInt(b.id.replace('member_', '')); 

---

Having said all this, you can rewrite your code with detach and one appendTo as follows:

 $("li[id*='member_']").detach().sort(function(a, b) { return +a.id.replace("member_", "") - b.id.replace("member_", ""); }).appendTo("ul#members-list"); 

Answer 2

provided that you do not have the same number twice, you can use this:

 return (parseInt(a.id.replace('member_', '')) > parseInt(b.id.replace('member_', ''))) ? 1 : -1; 

Salman Answer works for all cases.

sort () expects a value of 1.0, -1 as the return value: Array.prototype.sort () , so you shouldn't use the> sign.