Sort Divs by ID's name

Question

I'm having a strange error here, I'm trying to sort divs by its ID's name. You can take a look here:

It looks works... But we're wrong... If we add new ID like the example here:

The sort got broken. The only main difference is the addition of

 <div id="Palu">Palu<br></div>

I don't know why? It seem strange, can anyone give insight?

For those who need to see the full code here: HTML

<div class="cabang">
  <div id="Pematangsiantar">Pematangsiantar<br></div>
  <div id="Padang">Padang<br></div>
  <div id="Bengkulu">Bengkulu<br></div>
  <div id="Jambi">Jambi<br></div>
  <div id="Cikarang">Cikarang<br></div>
  <div id="Cirebon">Cirebon<br></div>
  <div id="Pontianak">Pontianak<br></div>
  <div id="Satui">Satui<br></div>
  <div id="Samarinda">Samarinda<br></div>
  <div id="Mataram">Mataram<br></div>
  <div id="Palu">Palu<br></div>

JavaScript:

var $divs = jQuery(".cabang div");
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
    return $(a).attr('id') > $(b).attr('id');
});
jQuery(".cabang").html(alphabeticallyOrderedDivs);

You should copy and paste your code into the question. It makes it easier for people trying to answer. — afuous, Jul 26 '16 at 10:43
Please see [String.prototype.localeCompare()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) — George, Jul 26 '16 at 10:48
@NickBull .. it works but the result of the sort is wrong... — Viktor Iwan, Jul 26 '16 at 10:50
@NickBull Results are different across browsers. Are you by any chance using Firefox? Try it in Chrome. — George, Jul 26 '16 at 10:51
@ViktorIwan The problem with your compare function is that the comparison should return -1 for smaller than, 0 for equal and +1 for greater than. You are not. Nevertheless the `localCompare` is better and is returning the before mentioned. More info http://stackoverflow.com/questions/24080785/sorting-in-javascript-shouldnt-returning-a-boolean-be-enough-for-a-comparison — Asken, Jul 26 '16 at 10:58

score 2 · Accepted Answer · answered Jul 26 '16 at 10:47

Try this:

You can use String.prototype.localeCompare

var $divs = jQuery(".cabang div");

var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
    return String.prototype.localeCompare.call($(a).attr('id').toLowerCase(),$(b).attr('id').toLowerCase());
});

$(".cabang").html(alphabeticallyOrderedDivs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cabang">
      <div id="Pematangsiantar">Pematangsiantar<br></div>
      <div id="Padang">Padang<br></div>
      <div id="Bengkulu">Bengkulu<br></div>
      <div id="Jambi">Jambi<br></div>
      <div id="Cikarang">Cikarang<br></div>
      <div id="Cirebon">Cirebon<br></div>
      <div id="Pontianak">Pontianak<br></div>
      <div id="Satui">Satui<br></div>
      <div id="Samarinda">Samarinda<br></div>
      <div id="Mataram">Mataram<br></div>
      <div id="Palu">Palu<br></div>
</div>

Hi @Jayesh Chitroda, it works ! quite amaze even though i don't know how String.protototype.localeCompare actually works... — Viktor Iwan, Jul 26 '16 at 10:54

Sort Divs by ID's name

1 Answers1