Using jQuery to sort li

Question

I have this script that I use to sort a list of li's, however it is not working when there is more than one digit, it is sorting with the first digit taking preference, so 10 comes before 2. Is there a way to modify this so it sorts it based on the numeric value?

jQuery.fn.sortDomElements = (function() {
    return function(comparator) {
        return Array.prototype.sort.call(this, comparator).each(function(i) {
              this.parentNode.appendChild(this);
        });
    };
})();

$("#sortable3, #sortable4").children().sortDomElements(function(a,b){
    akey = $(a).attr("sortkey");
    bkey = $(b).attr("sortkey");
    if (akey == bkey) return 0;
    if (akey < bkey) return -1;
    if (akey > bkey) return 1;
});

You need to convert the 'sortkey' attributes to integer, as they are being compared as strings right now. — Jhecht
– Jhecht, Commented Jan 18, 2015 at 5:10

Mark · Accepted Answer · 2015-01-18 05:23:33Z

2

You're comparing strings. When comparing strings you get this:

"10" <  "2"
true

Instead force the string to ints base 10:

parseInt("10", 10) <  parseInt("1", 10)
false

Trying this:

$("#sortable3, #sortable4").children().sortDomElements(function(a,b){
    akey = parseInt(($(a).attr("sortkey"), 10);
    bkey = parseInt($(b).attr("sortkey"), 10);
    if (akey == bkey) return 0;
    if (akey < bkey) return -1;
    if (akey > bkey) return 1;
});

should fix it.

edited Jan 18, 2015 at 5:23

answered Jan 18, 2015 at 5:11

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jdphenix Over a year ago

I would suggest always specifying the expected radix for parseInt()

Mark Over a year ago

Yes, you're right @jdphenix, that's an accepted best practice — edited my answer.

creativekinetix · Accepted Answer · 2015-01-18 05:11:12Z

1

Try converting the key to a number.

akey = parseInt($(a).attr("sortkey");
...

answered Jan 18, 2015 at 5:11

creativekinetix

3971 silver badge7 bronze badges

1 Comment

jdphenix Over a year ago

I would suggest always specifying the expected radix for parseInt()

Collectives™ on Stack Overflow

Using jQuery to sort li

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related