How to sort items with local characters using jquery?

Question

I want to sort the above divs alphabetically and have this code:

$('#btnabc').click(function(){
  $('.item').sort(function(a, b) {
    if (a.textContent < b.textContent) {return -1;}
    else {return 1;}
  }).appendTo('#panelb');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='panelb'>
  <div class='item'>zaba</div>
  <div class='item'>žaba</div>
  <div class='item'>ciao</div>
  <div class='item'>ćao</div>
  <div class='item'>suma</div>
  <div class='item'>šuma</div>
</div>

It works, but items with local characters are not sorted properly. Basically, during the sort proccess I need:

`ž` - to be considered as - `z`
`ć` and `č` - to be considered as - `c`
`š` - to be considered as - `s`
`đ` - to be considered as - `d`

Any help?

Answer 1

Four things:

1. Your code always returns -1 or 1. Sometimes it should return 0, e.g., when the items are the same.

2. Use String#localeCompare to get a locale-sensitive comparison.

3. Officially, jQuery doesn't have a sort method, so using it is a bad idea (as is using undocumented methods in general). Use Array#sort instead.

4. textContent isn't cross-browser reliable. Since you're using jQuery already, I'd use $(a).text() rather than a.textContent.

So:

var items = $('.item').get();
items.sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
});
$('#panelb').append(items);

(That can be written as a single statement, but I used three for clarity.)

Example:

$('#btnabc').click(function(){
    var items = $('.item').get();
    items.sort(function(a, b) {
        return $(a).text().localeCompare($(b).text());
    });
    $('#panelb').append(items);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='panelb'>
<div class='item'>zaba</div>
<div class='item'>žaba</div>
<div class='item'>ciao</div>
<div class='item'>ćao</div>
<div class='item'>suma</div>
<div class='item'>šuma</div>
</div>
<input type="button" id="btnabc" value="Click me">