javascript sort of HTML elements

Question

I'm trying to sort an li elements and get an unexpacted result I need to sort it three times to get it correctly,

where have I mistaken? javascript

var sort_by_name = function(a, b) {
    return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase();
}
$this = $("ol#table1");
var list = $this.children();
list.sort(sort_by_name);
console.log(list);
$this.html(list);

HTML

<ol id="table1" style="display: block; ">
   <li class="menu__run">I</li>
   <li class="menu__run">IXX</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li> 
   <li class="menu__run">IXX</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__test">st</li>
   <li class="menu__test">st</li>
   <li class="menu__test">st</li>
</ol>

fiddle example

nitrogen · Accepted Answer · 2013-06-05 01:59:09Z

48

There are much better ways to sort.

You need a comparison function that returns the right values: -1, 0, and 1.
localeCompare() is such a comparison function.
You can just move the DOM elements around rather than regenerating the HTML.
You can get the LI elements directly in the original selector.
"#table1" is a more efficient selector than "ol#table1".

I would suggest this:

$("div#btn").click(function() {
    var sort_by_name = function(a, b) {
        return a.innerHTML.toLowerCase().localeCompare(b.innerHTML.toLowerCase());
    }

    var list = $("#table1 > li").get();
    list.sort(sort_by_name);
    for (var i = 0; i < list.length; i++) {
        list[i].parentNode.appendChild(list[i]);
    }
});

Which you can see work here: http://jsfiddle.net/jfriend00/yqd3w/

edited Jun 5, 2013 at 1:59

nitrogen

1,7071 gold badge16 silver badges26 bronze badges

answered Apr 17, 2012 at 6:40

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

9 Comments

shevski Over a year ago

can you make something like this for objects under different <div>s?

jfriend00 Over a year ago

@shevski - I'm sure another scenario could be sorted too, but you'd have to show the HTML and describe what you want it sorted by.

shevski Over a year ago

I'll put another question for it

Mike 'Pomax' Kamermans Over a year ago

You're comparing for human eyes, so you want to ignore all the markup. Rather than .innerHTML, you want to compare .textContent, which looks at purely the textual data that is presented as visible to the user.

jfriend00 Over a year ago

@Mike'Pomax'Kamermans - Yep, it's up to the OP exactly what they want to sort on, but .textContent is indeed a good option.

|

Bergi · Accepted Answer · 2012-04-17 06:32:04Z

8

A custom compareFunction needs to return -1, 0 or 1.

function sort_by_name(a, b) {
    var sa = a.innerHTML.toLowerCase(), sb = b.innerHTML.toLowerCase();
    return sb<sa ? -1 : sb>sa ? 1 : 0;
}

answered Apr 17, 2012 at 6:32

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Chuck Norris · Accepted Answer · 2012-04-17 06:33:02Z

6

var sort_by_name = function(a, b) {
    return $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase());
}

You can use localeCompare instead to make things more elegant and workable.

See jsfiddle http://jsfiddle.net/Qww87/11/

answered Apr 17, 2012 at 6:33

Chuck Norris

15.2k15 gold badges96 silver badges128 bronze badges

Comments

Silviu-Marian · Accepted Answer · 2012-04-17 06:33:42Z

2

according to documentation it needs numeric values. more intelligible:

    var sort_by_name = function(a, b) {
         if(a.innerHTML.toLowerCase() < b.innerHTML.toLowerCase()) return -1;
         if(a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) return 1;
         return 0;
    }

answered Apr 17, 2012 at 6:33

Silviu-Marian

10.9k7 gold badges55 silver badges76 bronze badges

Comments

Abdennour TOUMI · Accepted Answer · 2013-09-13 16:59:48Z

0

Use my jquery plugin Sort Content :

   $('ol#table1').sortContent({asc:true})

That's it!

DEMO : http://jsfiddle.net/abdennour/SjWXU/

answered Sep 13, 2013 at 16:59

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

1 Comment

Oo'- Over a year ago

Your repo is no longer available.

Collectives™ on Stack Overflow

javascript sort of HTML elements

5 Answers 5

9 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related