Сортировка Divs по имени ID

Question

У меня здесь странная ошибка, я пытаюсь сортировать divs по имени своего идентификатора. Вы можете посмотреть здесь:

https://jsfiddle.net/veeco/t3wu9tss/5/

Это выглядит работает ... Но мы ошибаемся ... Если добавить новый идентификатор, как например здесь:

https://jsfiddle.net/veeco/t3wu9tss/4/

сорт был сломан. Единственным основным отличием является добавление

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

Я не знаю почему? Кажется странным, может ли кто-нибудь дать прозрение?

Для тех, кому нужно, чтобы увидеть полный код здесь: 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); 

Answer 1

Попробуйте это:

Вы можете использовать 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>