jquery сортировка по имени класса не работает

Question

Я хочу отсортировать мои div по имени класса, вот что у меня есть:

<div id="container">
    <div class="blue">1</div>
    <div class="red">2</div>
    <div class="red">3</div>
    <div class="blue">4</div>
    <div class="blue">5</div>
    <div class="red">6</div>
    <div class="blue">7</div>
</div>

var elem = $('#container').find('div').sort(sortMe);

function sortMe(a, b) {
    return a.className < b.className;
}
$('#container').append(elem);

.red {
    color:red;
}

.blue{
    color:blue;
}

https://jsfiddle.net/bekvLhm7/

На основании этого я бы ожидаю, что мой вывод будет выглядеть так:

2
3
6
1
4
5
7

Но даже после запуска кода он ничего не делает. Что я делаю не так?

Answer 1

Вам нужно вернуть 1 или -1 в сортировочном компараторе:

var elem = $('#container').find('div').sort(sortMe);

function sortMe(a, b) {
  return a.className < b.className ? 1 : -1;
}

$('#container').append("<br/>");
$('#container').append(elem.clone());

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div>1</div>
  <div class="red">2</div>
  <div class="red">3</div>
  <div>4</div>
  <div>5</div>
  <div class="red">6</div>
  <div>7</div>
</div>